Javascript 仅将CSS应用于子DIV

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

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

然而，我当前的CSS强调了我不想要的一切。我可以想到一个基于javascript的解决方案。CSS呢

---

---

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

在jQuery中尝试以下操作：

CSS:

JS:

函数深度搜索（父级）{
var b_ClassAdd=true；
如果（！父项）{
父项=$（'body'）；
b_ClassAdd=false；
}
var allDivChilds=parent.find（'div[comp id]'）；
如果（！allDivChilds | | allDivChilds.length==0）和&b_类添加）
parent.addClass（'hoverableClass'）；
其他的
for（var i=0；i

---

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

这是一个jQuery解决方案：

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

---

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

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

---

而且。。。好。。。多亏了@BMH，这才有效：

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

});

---

你的div有定义的深度吗？然后您可以通过

div div:hover{…}

访问它们，否则您可以通过js使用

.find（）

选择器选择该div。@DaKirsche没有，不幸的是没有预定义的深度。你能给我一个例子，说明在这种特殊情况下如何使用

.find（）

吗？使用jQuery查找最里面的子级：（在你的情况下，它应该是

$（'[comp id]：not（：has（[comp id]））

。如果嵌套深度没有预先确定，我认为纯CSS是不可能的。现在它看起来像是@TecHunter的副本，我已经设法回答了…我自己…哈哈。无论如何，非常感谢！：-）

$（'[comp id]：没有（：has（[comp id]））。addClass（'hoverableClass'）

；）我确实理解你建议的要点，而且肯定很有趣。然而，这里有一个问题：假设我们只将最里面的子对象标记为

可悬浮

。然后用户将鼠标悬停在其父项上，可悬停的是它的子项，而不是它自己。所以我想我们应该把最里面的孩子放在悬停状态？这是否可行？该函数标记每个div的最内层子级。它将与pawel的注释代码相同。如果一个div中没有另一个子div，则选中属性为comp id的div（父），并获取类hoverableClass。如果我将鼠标悬停在

3

上，则3将高亮显示。这很好。但是，当我将鼠标悬停在

2

上时，它不是。。。

1也是如此……它的工作原理与您在进一步澄清之前要求的一样。我已更新了我的答案，您的要求在多次编辑后发生了重大变化。嗯，您的（上一个）答案没有解决。。。里德尔也是。然而，您在解决方案方面提供了巨大的帮助（我现在发布）。非常感谢！（因此，+1）：-）嗯。。。我刚刚测试了它，它似乎做了完全相反的（=只突出显示父对象）尝试交换样式，我猜还需要一些调整。然后你可能会达到想要的效果，我想
e.stopPropagation（）作为事件函数的第一行更好，但找不到我读过的地方that@TecHunter隐马尔可夫模型。。。有趣。我想我会听从你的建议。：-）
$('[comp-id]').mousemove(function(e){
    $(this).removeClass('hover');
    $(e.target).addClass('hover'); 
}).mouseleave(function(e){
    $(this).removeClass('hover');
});

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

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

});