Question

我想让div中的图像变亮，但只在鼠标悬停时这样做，这样只有div中的图像会发生变化。我的代码可能有点草率但是在这里，谢谢。

＆＃13;

#textimg{
    
    background-image: url('images/stock1.jpg');
    height:100%;
    width:100%;
    min-height: 340px;
    max-width: 400px;
   
}



#textimg:hover{

     -webkit-filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.3));
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;   
}



#textimg img:hover{

    -webkit-filter: brightness(140%);
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;

}

＆＃13;

<div id="textimg">
      <img src="images/sometext.png">
</div>

＆＃13;

Answer 1

您正在寻找的术语是不透明度。在悬停时更改不透明度值并且它可以正常工作。

有一个例子供你参考： -

.container:hover .image {
  opacity: 0.3;
}   
.container:hover .middle {
  opacity: 1;
}

根据需要改变你的div

Answer 2

尝试在图像中添加一个类

body,html{
    margin: 0;
    height: 100%;
}
.container{
    width: 100%;
    height: 90%;
    
}
.img1{
    width: 100%;
    height: 100%;
    transition: opacity 2s;
}
.img1:hover{
    opacity: 0.5;
}

<div class="container">
  <img src="https://images.pexels.com/photos/162389/lost-places-old-decay-ruin-162389.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb" class="img1" />
 </div>

Answer 3

使用它：

+01 00:00:00.000000

只在悬停div时，使img保持在div内亮/发光

3 个答案: