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

2022-01-22 00:00:00 hover css xhtml

我正在寻找解决悬停问题的方法.

I'm looking for a method for my hovering issue.

<div class="section">

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

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

</div>

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

Now, both classes, image and layer, have borders. Both have different color for normal and hover. Is there way to make it, so if I hover layer class, both layer and image class hovering border color is active? And vise versa?

推荐答案

你不需要 JavaScript.

You don't need JavaScript for this.

一些 CSS 可以做到这一点.这是一个例子:

Some CSS would do it. Here is an example:

<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>

相关文章