CSS：悬停一个元素，对多个元素有影响吗？

我正在寻找一种解决悬停问题的方法。

<div class="layer">Lorem Ipsum</div>

</div>

现在，图像和图层这两个类都有边框。两者的正常和悬停都有不同的颜色。有办法做到这一点，所以如果我将图层类悬停，则图层和图像类的悬停边框颜色都处于活动状态？反之亦然？

慕妹3146593

浏览 607回答 3

3回答

30秒到达战场

您不需要JavaScript。一些CSS可以做到。这是一个例子：<html>  <style type="text/css">    .section { background:#ccc; }    .layer { background:#ddd; }    .section:hover img { border:2px solid #333; }    .section:hover .layer { border:2px solid #F90; }  </style></head><body>  <div class="section">    <img src="myImage.jpg" />    <div class="layer">Lorem Ipsum</div>  </div></body></html>

ABOUTYOU

我认为最好的选择是将两个div都用另一个div括起来。然后，您可以通过CSS通过以下方式进行制作：<html><head><style>  div.both:hover .image { border: 1px solid blue }  div.both:hover .layer { border: 1px solid blue }</style></head><body><div class="section"><div class="both">  <div class="image"><img src="myImage.jpg" /></div>  <div class="layer">Lorem Ipsum</div></div></div></body></html>

随时随地看视频慕课网APP