CSS:悬停一个元素,对多个元素的效果?

前端之家收集整理的这篇文章主要介绍了CSS:悬停一个元素,对多个元素的效果?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在寻找我的悬停问题的方法
<div class="section">

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

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

</div>

现在,两个类(图像和图层)都有边框,正常和悬停都有不同的颜色。
有没有方法使如果我悬停图层类,图层和图像类悬停边框颜色是活动的吗?反之亦然吗?

解决方法

这不需要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>
原文链接:https://www.f2er.com/css/223456.html

猜你在找的CSS相关文章