html - Mouseover & mouseout 连续触发事件？

Question

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

但是，当我尝试这样做时，事件会不断触发。

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

Answer 1

这是一种方法：

在您的轮播面板周围添加一个包装器（我猜这就是 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/

Answer 2

这是因为当您隐藏元素时，mouseout 事件也会触发，因为光标不再位于元素上。相反，将事件添加到父元素以获得所需的效果：

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