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

由于您的代码段与您提供的图片不同，因此我创建了一个简单的代码段，用于更改图像的不透明度并更改边框颜色（如果这是您的意思是框）为灰色

ListHelper

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

Answer 2

现在尝试使用已编辑的代码

＆＃13;

.w3-white {
  margin-top: -20px;
  width: 40%;
}

.w3-container:hover img {
  opacity: 0.5;
}

.w3-container:hover .w3-white {
  background-color: grey;
}

＆＃13;

<div class="w3-third w3-container w3-margin-bottom">
  <a href="#" style="display:block"><img src="http://webneel.com/daily/sites/default/files/images/daily/09-2013/1-diwali-greetings.preview.jpg" style="width:40%" 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>

＆＃13;

Answer 3

试试这个：

＆＃13;

.w3-third {
    border: 5px solid lightgreen;
    display: inline-block;
    position: relative;
    text-align: center;
}

p {
    margin: 0;
}

a {
    color: #000;
    text-decoration: none;
}

.w3-third:hover .w3-white {
    background-color: gray;
}

.w3-third:hover img {
    opacity: 0.2;
}

＆＃13;

<div class="w3-third w3-container w3-margin-bottom">
    <a href="#" style="display:block"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEnn9dYYZlciBKfaHCw17-dUgRPX3nq5_6-kV1ua-LIsId5g43uA">
    <div class="w3-container w3-white">
        <p><b>PSB2 and COM4</b></p>
        <p><b>&nbsp;</b></p>
    </div></a>
</div>

＆＃13;

Answer 4

尝试将图像和文本放入单个容器中并添加简单的过渡。请查看下面的代码段。

＆＃13;

.img-container {
  width: 250px;
  border: 2px solid blue;
}

.img-container p {
  padding: 10px 0;
  margin:0;
  transition: all 0.5s ease;
}

.img-container img{
  transition: all 0.5s ease;
}

.img-container:hover img {
  opacity: 0.5;
}

.img-container:hover p {
  background-color: grey;
}

＆＃13;

<div class="img-container">
  <a href="#">
    <img src="http://via.placeholder.com/250x150" />
    <p>Some text</p>
  </a>
</div>

＆＃13;

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

4 个答案: