javascript - 悬停仅影响嵌套集中的单个元素

Question

我无法更改嵌套了 <div> 的以下 HTML 结构所有具有相同类的元素 block .我想启用悬停行为，该行为仅影响鼠标此时悬停的元素，而不影响任何其他嵌套元素。

<div class="block">
    <div class="block">
        <div class="block">
            <div class="block">
                Text
            </div>
            Text
        </div>
        Text
    </div>
    Text
</div>

这是要演示的 fiddle :http://jsfiddle.net/FqKCY/3/

我试着用这个:

$( ".block" ).hover(
    function() {
        $( this ).addClass( "hover" );
    }, function() {
        $( this ).removeClass( "hover" );
    }
);

但这并没有帮助。也许我应该添加 if声明 .hasClass检查员？

我尝试的效果是否可行？

Answer 1

此解决方案利用了您开始使用的 .hover() 函数。更好的解决方案可能是编写您自己的处理程序，使用 .on() 阻止事件传播。您会注意到整个堆栈的文本已更改，因为 .css 继承，但您可以修改 .css，这样就不会发生这种情况。

使用的技术是在入口处移除所有悬停，然后仅将其应用于当前元素。退出时从所有元素中移除，然后仅应用于存在的父元素。

$(".block").hover(function () {
    $(".block").removeClass("hover");
    $(this).addClass("hover");
}, function () {
    $(".block").removeClass("hover");
    $(this).parent(".block").addClass("hover");
});

JSFiddle:http://jsfiddle.net/FqKCY/5/