Question

我希望有一个普通的彩色矩形在悬停时慢慢淡入图像。

我该怎么做？

Answer 1

您可以使用绝对定位覆盖div的元素，并在悬停时消失背景：

＆＃13;

#a {
   position:relative;
   background: url(https://dystroy.org/re7210/img/curryPouletDecoupe-600.jpg);
  width:500px;
  height:50px;
}
#a::after{
   position: absolute;
   left:0; right:0; top:0; bottom:0;
   background:red;
   opacity: 1;
   z-index:2;
   content:"";
   transition: opacity 1s;
}
#a:hover::after {
   opacity: 0;
   transition: opacity 4s;
}

＆＃13;

<div id=a></div>

＆＃13;

不透明度的CSS转换会使更改逐渐变化。当然，您可以使用具体元素而不是伪元素。

Answer 2

尝试这样的事情

HTML：

<div class="my-div"> hover me </div>

的CSS：

.my-div{
    background: #0f0;
}
.my-div:hover{
    background: url("urlToImg");
    transition: background 1s ease;
}

当您悬停.my-div元素时，它会在1s

中缓慢更改其背景

Answer 3

您可以使用CSS Transitions：

＆＃13;

.img-hover {position: relative;}
.img-hover span {background-color: #000; width: 100px; display: block; height: 100px; position: absolute; left: 0; top: 0; -webkit-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s;}
.img-hover span:hover {opacity: 0; -webkit-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s;}
.img-hover img {display: block;}

＆＃13;

<div class="img-hover">
  <span></span>
  <img src="http://placehold.it/100x100" />
</div>

＆＃13;

悬浮时会变成图像的纯色

3 个答案: