html - 悬停框颜色和图像不透明度

Question

我在它下面有一张图片和文字，用一个“a”标签包裹起来。将鼠标悬停在带有文本的白色框上会使框变成灰色。将鼠标悬停在图像上，它会产生不透明效果。

当鼠标悬停在上方时，我怎样才能使框变灰并同时出现图像不透明度。目前这些是分开发生的。这不是一个大问题，但如果它们一起发生，情况会更好。

这是一个截图 - https://imgsafe.org/image/ef3964b27c

这是我的 HTML；

<div class="w3-third w3-container w3-margin-bottom">
  <a href="#" style="display:block">
    <img src="Images/MCR.png" style="width:100%" class="w3-hover-opacity">
    <div class="w3-container w3-white">
      <p><b>PSB2 and COM4</b></p>
      <p><b>&nbsp;</b></p>
    </div>
  </a>
</div>

Answer 1

由于您的代码片段与您提供的图片不同，我创建了一个简单的代码片段来更改图像的不透明度并将边框颜色(如果这就是您所说的框的意思)更改为灰色

.wrapper {
  height: 200px;
  width: 250px;
  border: 3px solid green;
}
.wrapper:hover {
  border: 3px solid gray;
}
.wrapper:hover img {
  opacity: 0.5;
}

<div class="wrapper">
  <a href="#">
    <img src="http://via.placeholder.com/250x150" />
  </a>
</div>