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

Answer 2

鉴于OP在问题的评论中提供的详细信息，我建议遵循以下解决方案：

我会在每个文本周围添加一个span包装器。因此，生成HTML的抽象函数将成为：

function(){
    $a.="<div><span>$inc</span>"; // span tag added
    if(1){
        $a.=function();
    }
    $a.='</div>';
    return $a;
}

现在HTML输出应该看起来像这样：

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

这使得用这个CSS设置样式的可能性：

div span:hover {
    color:red;
}

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

2 个答案: