仅将 CSS 应用于子 DIV

Question

好的，假设我有一个类似的结构，如下所示：

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

我想要做的就是对孩子应用悬停效果（在本例中是带有comp-id="three" 的那个）。

---

重要提示：我不想专门针对[comp-id="three"]。我想以 any 孩子为目标，不管是哪个comp-id 值。在现实世界的例子中，可能存在无限嵌套的[comp-id]ed divs。 我只需要最里面的孩子。

我想要达到的目标：

• 用户将鼠标悬停在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

您可以为此使用 '>' 子选择器来停止级联样式

[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;
}