Question

好吧，假设我有类似以下的结构：

<div comp-id='one'>
    <div comp-id='two'>
         <div comp-id='three'>
         ...
         </div>
    </div>
</div>

我想要做的就是对孩子应用悬停效果（在这种情况下，是comp-id="three"）。

重要提示：我不想专门针对 [comp-id="three"]。我想定位任何孩子，无关紧要 - comp-id值。在现实世界的示例中，可能存在无限嵌套[comp-id] ed div s。 我只需要最内心的孩子。

我想要实现的目标：

用户将鼠标悬停在three上，然后突出显示 three（不是one和two）
用户将鼠标悬停在two上，然后突出显示 two（不是one - 当然，不是three）

我目前的CSS代码：

[comp-id]:hover {
    box-shadow: inset 0 0 0 2px red;
    -webkit-box-shadow: inset 0 0 0 2px red;
    -moz-box-shadow: inset 0 0 0 2px red;
    -o-box-shadow: inset 0 0 0 2px red;
}

然而，我目前的CSS突出了一切不是我想要的东西。我可以想到一个基于JavaScript的解决方案。那CSS怎么样？

警告：我不是这样的CSS大师，所以这个可能非常简单......： - ）

Answer 1

而且......好吧......感谢@BMH，这个是有用的：

$('[comp-id]:not(.hover)').mousemove(function(e){
    $('[comp-id]').removeClass('hover');
    e.stopPropagation();
    $(this).addClass('hover');

});

Answer 2

这是一个jQuery解决方案：

$('[comp-id]').mousemove(function(e){
    $(this).removeClass('hover');
    $(e.target).addClass('hover'); 
}).mouseleave(function(e){
    $(this).removeClass('hover');
});

http://jsfiddle.net/sMRMz/4/

Answer 3

在jQuery中尝试这样的事情：

CSS：

.hoverableClass:hover {
    box-shadow: inset 0 0 0 2px red;
    -webkit-box-shadow: inset 0 0 0 2px red;
    -moz-box-shadow: inset 0 0 0 2px red;
    -o-box-shadow: inset 0 0 0 2px red;
}

JS：

function deepSearch(parent){
    var b_ClassAdd = true;
    if (!parent){
        parent = $('body');
        b_ClassAdd = false;
    }

    var allDivChilds = parent.find('div[comp-id]');
    if ((!allDivChilds || allDivChilds.length == 0) && b_ClassAdd)
        parent.addClass('hoverableClass'); 
    else
        for (var i = 0; i < allDivChilds.length; i++)
            deepSearch($(allDivChilds[i]));
}

deepSearch();

此代码未经测试，只是一个解决方案的想法。

Answer 4

您可以使用'＆gt;'用于此的子选择器，用于停止级联样式

[comp-id]:hover {
    box-shadow: inset 0 0 0 2px red;
    -webkit-box-shadow: inset 0 0 0 2px red;
   -moz-box-shadow: inset 0 0 0 2px red;
    -o-box-shadow: inset 0 0 0 2px red;
}

[comp-id]:hover > *{
  box-shadow: none;
    -webkit-box-shadow: none;
   -moz-box-shadow: none;
    -o-box-shadow: none;
}

仅将CSS应用于子DIV

4 个答案: