Question

我在使用jquery / css时遇到了一些麻烦。当鼠标悬停在链接上时，我想显示一个框，但是当光标从链接移动到框时，此框不能消失。目前这是有效的，但另一件事是，如果您将光标从链接移动到站点的任何其他不是框的部分，也应该关闭该框。

此fiddle演示了此行为。只需将光标从链接移动到网站上的其他位置（但避免将鼠标悬停在显示的框中），您将看到该框仍然存在。

这就是我的jQuery代码：

$("#link").mouseenter(function () {
    $("#cart_box").fadeIn();
});
$("#cart_box").mouseleave(function() { 
    $("#cart_box").fadeOut();
});

Answer 1

将cart_box纳入a，

<div id="left"> 
    <a href="#" id="link">
        <div style="margin-left: 31px;">
            <div class="cart_img">IMG</div>
            <span style="margin-left: 10px;">My Cart</span> 
        </div>
        <div id="cart_box">

    </div>
    </a>

</div>

然后改变你的功能

$("#link").mouseenter(function () {
    $("#cart_box").fadeIn();
});
$("#link").mouseleave(function() { 
    $("#cart_box").fadeOut();
});

但请注意，默认情况下a将是inline元素，因此当此框显示并且您尝试将鼠标悬停在框中时，它可能会闪烁，因为您正在移出对于1px可能a然后移入，以避免您需要向a添加一些高度，等于cart_box顶部和IMG底部之间的间隙，为此，您需要将a作为block，将此css添加到a

#left a{
    display:block;
    height:50px; //anything to cover the 1px or 2px between cart_box top and the IMG bottom
}

另外，请参阅更新的小提琴：http://jsfiddle.net/a5TLC/7/

P.S：您可能想要在width中更改cart_box，只要您在链接中有{{1}}。

Answer 2

只需在div上封装链接和框，然后将mouseleave应用于该div。

这是因为如果鼠标没有进入框中，则无法调用mouseleave事件。

Answer 3

你不需要javascript 。你应该只是包含你的“＆＃39;框”。在a内，并在链接悬停时显示。像这样：

HTML：

<a>
    hover me
    <div>to see me</div>
</a>

CSS（没有前缀！）：

a div {
    transform: scale(0);
    opacity: 0;
    transition: all .5s;
}
a:hover div {
    transform: scale(1);
    opacity: 1;
}

我添加了一个转换/转换来说明这些简单的事情可以通过纯css轻松完成，而且通常更顺畅，更快。

亲眼看看：http://jsfiddle.net/6gT2u/

在悬停元素后保持div打开

3 个答案: