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

Hover object comes up twice on background/foreground element when layers are overlapping

本文关键字：元素 两次 重叠 图层 悬停 对象 背景      更新时间：2023-09-26

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

每次我将鼠标悬停在此对象上时，重叠的对象都会打开两次，如何使其只淡入一次并停留在那里，直到我鼠标全部悬停？因此，无论您是在背景对象还是前景对象上都没关系。

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

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

您可能正在寻找这个：

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

元素在鼠标下闪烁的原因是因为它触发了$('.someclass')上的mouseleave事件（因为从技术上讲，鼠标确实离开了该对象）。这是一个棘手的情况。可能会涉及在鼠标悬停在<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);
相关文章：