[英]I want to display div when hover on anchor tag by JQUERY
这是我的代码，但没有任何反应。 当我将鼠标悬停在锚标记上时，我想显示一个像弹出窗口一样的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>
您需要在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>
您的代码在下面的小提琴中对我来说正常工作： https : //jsfiddle.net/nileshmahaja/uxtvnp9s/1/
我所做的唯一更改是将您的代码放入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>
我想在用户将鼠标悬停在登录元素上时显示一个 div，但是当用户将鼠标移动到 ReactJS 中的其他 div 时应该显示 div
[英]I want to display a div when user hover over a sign in element but div should be displayed when user moves the mouse to that div other in ReactJS
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.