1

就在昨天，我需要为 HTML 的边框颜色设置动画，div并且遇到了来自bitstorm的颜色动画 jquery 插件。它轻量级且易于使用，但它似乎有一个错误。我有以下一段 HTML：

<div class="object-list-item" id="oli-0" reference="0">
    <div class="close_btn" tooltip_text="Remove this object"></div>
    <img class="thumb" src="img/text-icon.png" />
    <div class="text-preview"></div>
    <div class="clear"></div>
</div>

在内部元素和父元素的边框之间有一些空间（以像素为单位）。此外，我为mouseover和mouseout事件添加了两个事件处理程序，附加到object-list-item元素上，如下所示：

$(document)
        .on("mouseover", "div.object-list-item", function(){
            $(this).animate({ borderColor : "#555" },300);                                                       
        })
        .on("mouseout", "div.object-list-item", function(){
            $(this).animate({ borderColor : "#ddd" },300);                                                       
        });

我还整理了一个小提琴，您可以在其中看到这种行为：http: //jsfiddle.net/2UKRG/2/

问题是当我悬停任何内部元素时，事件处理程序也会为它们触发。我怎样才能解决这个问题？

4

2 回答 2

2

我现在很懒，但很确定您只需要更改mouseover, mouseout为mouseenter, mouseleave：

http://jsfiddle.net/2UKRG/3/

$(document)
    .on("mouseenter", "div.object-list-item", function(){
        $(this).animate({ borderColor : "#555" },300);                                                         
    })
    .on("mouseleave", "div.object-list-item", function(){
        $(this).animate({ borderColor : "#ddd" },300);                                                         
    });​
于 2012-10-05T13:46:25.933 回答
2

您也可以尝试将其更改为hover- http://jsfiddle.net/WJE2y/

$('div.object-list-item').hover(function(){
    $(this).animate({ borderColor : "#555" },300);
}, function(){
    $(this).animate({ borderColor : "#ddd" },300);
});

至于“为什么” - mouseover 和 mouseenter 事件之间有什么区别的答案？很好地解释了它并链接到http://docs.jquery.com/Events/mouseover

于 2012-10-05T13:51:28.507 回答