Question

我有一个嵌套div，我想在鼠标上隐藏它，并在鼠标移出时显示。

然而，当我尝试这样做时，事件会不断被触发。

代码很长，所以更详细，例如请查看小提琴@ http://jsfiddle.net/jWbZy/16/

Answer 1

那是因为当你隐藏元素时，mouseout事件也会触发，因为光标不再在元素上。而是将事件添加到父元素以获得所需的效果：

$('.slideshow')
    .mouseover(function(){
        $(this).find('.cp').hide();
    })
    .mouseout(function(){
        $(this).find('.cp').show();
    });

Answer 2

这是一种方法：

在旋转木马面板周围添加一个包装器（我想这就是cp所代表的）：

<div class="cpWrapper">
    <div class="cp">
        <div class="prev"></div>
        <div class="next"></div>
    </div>
</div>

具有以下风格：

.cpWrapper {
    position: absolute;
    width: 100%; 
    height: 100%; 
}

隐藏/显示其子元素：

$('.slideshow .cpWrapper').mouseover(function() {
    $(this).find('.cp').hide();
});
// ...

这里的工作示例：http://jsfiddle.net/Kxvuk/

鼠标悬停＆amp; mouseout会不断触发事件？

2 个答案: