Question

我无法更改以下具有嵌套<div>元素的HTML结构，这些元素都具有相同的类block。我想启用一个悬停行为，只影响鼠标当前所在的元素，而不是任何其他嵌套元素。

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

这是演示的小提琴：http://jsfiddle.net/FqKCY/3/

我试着用这个：

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

但它没有帮助。也许我会在if检查器中添加.hasClass声明？

我正在尝试的效果是否可能？

Answer 1

我尝试稍微更改标记。请检查此fiddle.

HTML：

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

Answer 2

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

使用的技术是删除条目上的所有悬停，然后仅将其应用于当前元素。退出时从all中删除，然后仅应用于父元素（如果存在）。

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

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

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

2 个答案: