javascript - 当图层重叠时，悬停对象在背景/前景元素上出现两次

Question

请查看此示例：http: //jsfiddle.net/AAd9b/1/

每次我将鼠标悬停在这个对象上时，重叠的对象都会打开两次，我该如何让它只消失一次并一直呆在那里，直到我将所有东西都鼠标移出？所以不管你是在背景还是前景对象上。

Answer 1

.hover()接受两个参数：handlerIn和handlerOut. fadeIn如果您只提供一个回调，则会在两个事件上调用它，因此您需要查看事件类型以确定您是fadeOut

http://api.jquery.com/hover/

你可能正在寻找这个：

$('.someclass').hover(
    function() {
        //-- mouseenter
    },
    function() {
        //-- mouseleave
    }
);

您的元素在鼠标下闪烁的原因是因为它触发了mouseleave事件$('.someclass')（因为从技术上讲，鼠标确实离开了该对象）。这是一个棘手的场景。当鼠标悬停在您的<p>...或一些花哨的 CSS 技巧时，可能会涉及取消绑定和重新绑定事件。

或者试试这个：http: //jsfiddle.net/UBdgz/

HTML：

<div class="wrapper">
    <div class="someclass">
        <a href="#">Hover Me</a>

    </div>
    <p>Only Once!</p>
</div>

JS：

var handleHover = function(evt) {
    switch (evt.type) {
        case 'mouseenter':
            $("p").fadeIn();
            break;
        case 'mouseleave':
            $("p").fadeOut();
            break;
    }
}
$(".wrapper").bind('mouseenter mouseleave', handleHover);