Javascript 我想在JQUERY将鼠标悬停在锚点标记上时显示div_Javascript_Jquery_Html_Css

Javascript 我想在JQUERY将鼠标悬停在锚点标记上时显示div

javascript jquery html css

Javascript 我想在JQUERY将鼠标悬停在锚点标记上时显示div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,这是我的代码，但没有发生任何事情。当我将鼠标悬停在锚定标记上时，我想显示一个类似弹出窗口的div   <head runat="server"> <title></title> <script src="script/jquery-1.11.1.min.js"></sc

这是我的代码，但没有发生任何事情。当我将鼠标悬停在锚定标记上时，我想显示一个类似弹出窗口的

div

<!-- begin snippet: js hide: false -->

<!-- language: lang-html -->

<head runat="server">
    <title></title>
    <script src="script/jquery-1.11.1.min.js"></script>
    <script>
        $(".hoverdetails").on({
            mouseover: function() {
                $(".romdetails").stop().show(1000);
            },

            mouseout: function() {
                $(".romdetails").stop().hide(1000);
            }
        })
    </script>
</head>

<form id="form1" runat="server">
<asp:DataList ID="dtlRoomCart" CssClass="romcrt" HorizontalAlign="center" runat="server" ShowHeader="False"
                                                                            Width="720px" OnItemDataBound="dtlRoomCart_ItemDataBound">
                                                                            <ItemTemplate>
        <a href="#" class="hoverdetails">RoomDetails</a>
    <div class="romdetails" style="background-color:blue;width:300PX;height:300PX;display:none">
    </div>
                                                                              </ItemTemplate>
    </asp:DataList>
</form>


$（“.hoverdetails”）。在({
mouseover:function（）{
$（“.romdetails”）.stop（）.show（1000）；
},
mouseout:function（）{
$（“.romdetails”）.stop（）.hide（1000）；
}
})

加载DOM后，您需要运行代码-将代码放在文档就绪处理程序中：


$（函数（）{/<处理程序开始
$（“.hoverdetails”）。在({
mouseenter:function（）{
$（“.romdetails”）.stop（）.show（1000）；
},
mouseleave:function（）{
$（“.romdetails”）.stop（）.hide（1000）；
}
})
}); // < 处理端

您的代码在以下情况下为我正常工作：

我所做的唯一更改是将代码放入document.ready函数中

jquery

$(document).ready(function(){
$(".hoverdetails").on({
            mouseover: function () {
                $(".romdetails").stop().show(1000);
            },

            mouseout: function () {
                $(".romdetails").stop().hide(1000);
            }
        })

});

在Document.ready内完成

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() { 
            $(".hoverdetails").on({
                mouseenter: function() {
                    $(".romdetails").stop().show(1000);
                },
                mouseleave: function() {
                    $(".romdetails").stop().hide(1000);
                }
            })
        }); 
    </script>

    <form id="form1" runat="server">
        <a href="#" class="hoverdetails">RoomDetails</a>
        <div class="romdetails" style="background-color: blue; width: 300px; height: 300px; display: none;"></div>
    </form>


$（文档）.ready（函数（）{
$（“.hoverdetails”）。在({
mouseenter:function（）{
$（“.romdetails”）.stop（）.show（1000）；
},
mouseleave:function（）{
$（“.romdetails”）.stop（）.hide（1000）；
}
})
});

同样的代码对我来说非常好！我更新了我的代码你可以查看我希望它在datalist控件内我更新了我的代码你可以查看我希望它在datalist控件内