Question

<div class="img-box">
               <i class="ion-play"></i>
               <img src="resources/images/john.jpg" alt="">
</div>

基本上，当我将鼠标悬停在img-box上时，我希望图像变暗，而不是图标。我的css现在：

.img-box:hover {
color: #fff;
transition: filter 0.3s, color 0.3s;
filter: brightness(30%);}

提前谢谢

Answer 1

使用选择器.img-box:hover > img，以便将样式应用于<img>，而不是整个<div>。

＆＃13;

.img-box:hover > img {
  color: #fff;
  transition: filter 0.3s, color 0.3s;
  filter: brightness(30%);
}

.ion-play {
  color: red;
}

＆＃13;

<div class="img-box">
  <i class="ion-play">icon</i>
  <img src="http://via.placeholder.com/350x150" alt="">
</div>

＆＃13;

注意：您也可以使用选择器.img-box:hover img。这取决于你的标记是什么。

Answer 2

您必须将图标相对于img-box绝对定位，以获得所需的行为。

这样的事情：

＆＃13;

.img-box:hover {
  position: relative;
  color: #fff;
  transition: filter 0.3s, color 0.3s;
  filter: brightness(30%);
}

.ion-play {
  position: absolute;
  top: 20px;
  left: 20px;
}

＆＃13;

<div class="img-box">
  <i class="ion-play"></i>
  <img src="resources/images/john.jpg" alt="">
</div>

＆＃13;

Answer 3

试试这个：

.img-box:hover img {
  color: #fff;
  transition: filter 0.3s, color 0.3s;
  filter: brightness(30%);
}

Answer 4

尝试使用此CSS，它将解决您的问题。

＆＃13;

.img-box:hover img {
  color: #fff;
  transition: filter 0.3s, color 0.3s;
  filter: brightness(30%);
}

＆＃13;

使图像更暗，但不是图标

4 个答案: