这应该很简单,但我是新手,我想我想多了。我想在另一个元素悬停时显示一个元素,并在用户将鼠标悬停在其中一个元素上时保持它显示。
这是我的开始,我尝试编写一个 if 语句来说明元素是否显示并悬停在其上,保持显示状态,但它并没有改变您看到的行为 in this fiddle .
在示例中,如果用户移动鼠标尝试单击它,我希望“我是一个链接”文本保留在那里。我在 SO 上找到了其他帖子,例如 this one但无法应用他们的答案来解决我的问题。
If you look at this page ,并将鼠标悬停在鞋子上,您可以看到我想要达到的确切效果。显示产品信息,您可以移动鼠标点击。
$("#caribbean-info").mouseenter(function () {
$('#example3-link1').slideDown(400);
}).mouseleave(function () {
$('#example3-link1').slideUp(400);
});
我也试过做这样的事情,但行不通:
$("#caribbean-info").mouseenter(function () {
$('#example3-link1').slideDown(400).hover(function () {
$('#example3-link1').show();
}).mouseleave(function () {
$('#example3-link1').hide();
});
}).mouseleave(function () {
$('#example3-link1').slideUp(400);
});
请给我亮光!
最佳答案
如果您将 div 和链接都包装在一个容器中,那么您可以简单地将 mouseenter 和 mouseleave 事件应用到那个......
HTML
<div id="container">
<div id="caribbean-info"></div>
<a href="#test" id="example3-link1">I am a link - click here.</a>
</div>
Javascript
$("#container").mouseenter(function() {
$("#example3-link1").slideDown();
});
$("#container").mouseleave(function() {
$("#example3-link1").slideUp();
});
CSS
我还对 css 进行了细微的更改,以便仅当您将鼠标悬停在 #caribbean-info
的可见部分上方时才会显示链接。我只是将显示设置为内联 block :
#caribbean-info{
height: 100px;
width: 300px;
cursor: pointer;
display: inline-block;
border: 1px solid #ccc;
position: relative;
}
关于javascript - 当鼠标悬停在元素上时显示隐藏的 div 并保持显示直到鼠标离开任一元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18854084/