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> 上时，可能会涉及取消绑定(bind)和重新绑定(bind)事件...或一些花哨的 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);