[英]I want to display div when hover on anchor tag by JQUERY
This my code but nothing happens with it. 这是我的代码,但没有任何反应。 When I hover over the anchor tag I want to display a div
like a popup window. 当我将鼠标悬停在锚标记上时,我想显示一个像弹出窗口一样的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>
You need to run your code when the DOM has loaded - place your code in a document ready handler: 您需要在DOM加载后运行代码-将代码放置在文档就绪处理程序中:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(function() { // < handler start $(".hoverdetails").on({ mouseenter: function() { $(".romdetails").stop().show(1000); }, mouseleave: function() { $(".romdetails").stop().hide(1000); } }) }); // < handler end </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>
Your code working properly for me in the following fiddle : https://jsfiddle.net/nileshmahaja/uxtvnp9s/1/ 您的代码在下面的小提琴中对我来说正常工作: https : //jsfiddle.net/nileshmahaja/uxtvnp9s/1/
The only change I did is I put your code into document.ready function 我所做的唯一更改是将您的代码放入document.ready函数中
jquery jQuery的
$(document).ready(function(){
$(".hoverdetails").on({
mouseover: function () {
$(".romdetails").stop().show(1000);
},
mouseout: function () {
$(".romdetails").stop().hide(1000);
}
})
});
demo Do it within Document.ready 演示在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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.