html - 突出显示彼此放置的多个 div 元素

Question

我有CSS

div{margin-left:15px;}
div:hover{color:red;}

我有多个div

<div>
 <div>123</div>
 <div>456</div>
    <div>
    <div>789</div>
       <div>
          <div>10 11 12</div>
       </div>
    </div>
</div>

我需要只有一个 div 在鼠标指针下时高亮显示。

现在，当鼠标悬停在其中任何一个上时，它们都会变成红色。

纯CSS代码可以吗？

Answer 1

我不确定你为什么有这么多 div，如果你想让它们像列表一样缩进，你应该使用 ul 和 li 但要解决您的问题，您可以将它们全部包装在一个容器中，然后将 div 悬停在该容器内:

.all div:hover{color:red;}

JSFIDDLE

编辑

只需向它们添加类名，然后定位该类

JS