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

一尘不染

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

css

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

<div class="section">

<div class="image"><img src="myImage.jpg" /></div>

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

</div>

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

阅读 274

2020-05-16

共1个答案

一尘不染

您不需要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>

2020-05-16