Question

在hoverIn上 - 我想要附加一个方框，将其向上滑动。

在hoverOut - 框中应向下滑动，然后移除框

在一个简单的列表上它完美地工作，我可以将鼠标悬停在滑动元素上。但是，如果我正在使用图像，当我将鼠标悬停在滑动元素上时会导致闪烁效果。

Working。
Not working。

将鼠标悬停在元素上，然后尝试将光标鼠标放在出现的红色框上。这有什么区别，我错过了什么？

对于相关对象和类似情况，我是否需要使用stopPropagation？无法理解它。

Answer 1

查看JsFiddle的最新版本。我更新了jQuery以稍微不同地选择元素，所以现在它应该按照你想要的方式运行。

$('#aaa li').hover(function(){
    $(this).append('<div id="box"></div>'); 
    $(this).children('div').stop().animate({
        bottom:'0px'
    },{
    queue:false,duration:350
    });       
}, function() {  
    $(this).children('div').stop().animate({
        bottom:'-53px'
    },{
        queue:false,duration:300,complete:function() {
            $(this).children('div').remove(); 
        }

    });

});

Answer 2

img和div不是父/子关系。 img不能包含任何内容。你需要给他们一个共同的父母。也许是一个跨度，或者只是像你在第一个例子中那样使用li。

请参阅http://jsfiddle.net/tXJDQ/26/作为示例。

Answer 3

当您将鼠标悬停在简单的li（工作示例）上时，框会在鼠标指针下滑动---＆gt;你仍然在技术上徘徊在李。

然而，当你将鼠标悬停在img（不是工作示例）上并且框在你的鼠标指针下滑动时---＆gt;你被动地“徘徊”在形象之外。

在第二种情况下，jquery看到你已经徘徊（即使它是被动的），并开始悬停序列。

你有两个选择（我能想到的）来解决这个问题：

将图像作为背景添加到li。
创建一个既包含图像又包含框的div。那么你必须在那个父div上设置hoverin / hoverout效果。

徘徊在儿童元素射击鼠标

3 个答案: