jQuery / CSS在悬停时显示图像
[英]Jquery/css displaying an image on hover
问题描述
I have a div with id="mybutton" and a hidden div with id="mydiv" like in the code below : 
我有一个id =“ mybutton”的div和一个id =“ mydiv”的隐藏div，如下面的代码所示：
<head>
<script>
$(document).ready(function(){
$("#mybutton").hover(function(){
$("#mydiv").fadeIn();
}, function(){
$("#mydiv").fadeOut();
});
});
</script>
</head>
<body>
<div id="mybutton">Show</div>
<div id="mydiv" style="display:none;">Hidden thing..</div>
</body>
I want "mydiv" to appear even if mouse is over "mydiv"(after hovering at mybutton). 我希望即使鼠标悬停在“ mydiv”上（悬停在mybutton之后）也要显示“ mydiv”。
6 个解决方案
解决方案1
2 2014-03-26 14:59:12
Write CSS 编写CSS
#mydiv{
display:none;
/* visibility:hidden; */
}
#mybutton:hover + #mydiv,#mydiv:hover{
display:block;
/* visibility:visible; */
}
You can also use visibility:visible; 您还可以使用visibility:visible; and visibility:hidden; 和visibility:hidden; instead of display property 而不是display属性
解决方案2
0 2014-03-26 14:37:12
$(document).ready(function(){
$("#mybutton").hover(function(){
$("#mydiv").fadeIn();
}, function(){
$("#mydiv").fadeOut();
});
});
解决方案3
0 已采纳 2014-03-26 14:39:33
Give a common parent to them and connect the hover to it. 给他们一个共同的父母，并将鼠标悬停在上面。
html: 的HTML：
<div id="parent">
<div id="mybutton">Show</div>
<div id="mydiv">Hidden thing..</div>
</div>
css: CSS：
#mydiv {
display: none;
}
Jq: Jq：
$(document).ready(function(){
$("#parent").hover(function(){
$("#mydiv").fadeIn();
}, function(){
$("#mydiv").fadeOut();
});
});
JSfiddle: http://jsfiddle.net/f2W9b/ JSfiddle： http : //jsfiddle.net/f2W9b/
解决方案4
0 2014-03-26 14:39:42
Wrap it inside div: 将它包装在div中：
<div id="container">
<div id="mybutton">Show</div>
<div id="mydiv">Hidden thing..</div>
</div>
And listen for mouseenter event on the container div. 并在容器div上监听mouseenter事件 。
解决方案5
0 2014-03-26 14:40:34
Wrap your button in a container, like so: 将按钮包装在容器中，如下所示：
<span id="hoverarea">
<div id="mybutton">Show</div>
<div id="mydiv" style="display: none;">Hidden thing..</div>
</span>
<script>
$(document).ready(function(){
$("#hoverarea").hover(function(){
$("#mydiv").fadeIn();
}, function(){
$("#mydiv").fadeOut();
});
});
</script>
解决方案6
0 2014-03-26 14:56:38
In the fadeout() portion of your function, can you check if the mouse is currently hovering over the #mydiv div? 在函数的fadeout（）部分中，可以检查鼠标当前是否悬停在#mydiv div上吗？ If so (such as adding a class on hover to the #mydiv), check it and don't fadeout. 如果是这样（例如将悬停类添加到#mydiv），请检查它，不要淡出。
<head>
<script>
$(document).ready(function(){
$("#mybutton").hover(function(){
$("#mydiv").fadeIn();
}, function(){
if (!$("#mydiv").hasClass('hovering') {
$("#mydiv").fadeOut();
}
});
$("#mydiv").hover(function(){
$("#mydiv").addClass('hovering');
}, function (){
$("#mydiv").removeClass('hovering');
});
});
</script>
</head>
<body>
<div id="mybutton">Show</div>
<div id="mydiv" style="display:none;">Hidden thing..</div>
</body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.