当前位置：文江博客话题详情

鼠标悬停并mouseout连续触发事件？

发布于 2024-11-30 20:25:04 字数 189 浏览 5 评论 0原文

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

痴骨ら 2024-12-07 20:25:04

这是一种方法：

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

Here's a way to do it:

Add a wrapper around your carousel panel (i guess that's what cp stands for):

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

With the folowing style:

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

And hide/show its child elements:

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

Working example here: http://jsfiddle.net/Kxvuk/

回复收藏 0 原文

夏末 2024-12-07 20:25:04

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

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

That's because when you hide the element, mouseout event fires also as the cursor is no more on the element. Instead, add the event to the parent element to get the desired effect:

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

回复收藏 0 原文

~没有更多了~