Question

我在文字悬停时使用此代码，图像弹出，但可以通过设置过渡到它来成功。当我悬停图像时，图像会立即弹出而没有任何过渡。

＆＃13;

.link #img {
  position: absolute;
  top: -450%;
  left: 25%;
  display: none;
}

.link:hover #img {
  display: block;
}

#img {
  width: 160px;
  transition: 0.2s linear;
}

＆＃13;

<a href="#" class="link">Photography<img src="content/images/a.png" id="img"></a>

＆＃13;

Answer 1

尝试使用此代码

使用visibility或opacity并从top:-450%删除css

＆＃13;

.link #img {
  position: absolute;
  left: 25%;
  visibility: hidden;
  opacity: 0;
}

.link:hover #img {
  visibility: visible;
  opacity: 1;
}

#img {
  width: 160px;
  transition: 0.5s linear;
}

＆＃13;

<a href="#" class="link">Photography<img src="https://static.pexels.com/photos/34950/pexels-photo.jpg" 
    id="img"></a>

＆＃13;

Answer 2

使用opacity or visibility代替display。

.link #img {
  position:absolute;
  top:0;
  left:150px;
  opacity:0;   
}
.link:hover #img {
  opacity:1;
}
#img {
  width:160px;    
  transition: 0.5s linear;    
}

<a href="#" class="link">Photography<img src="https://dummyimage.com/200x200/000/fff" 
id="img"></a

Answer 3

我有点编辑代码。这是工作版。请检查一下。

仅为了您的知识 - 属性显示不会受到转换的影响，因为它只有两种状态：显示和不显示，中间没有状态，因此转换不能用于此目的

Doog运气：）

#img {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  width: 160px;
  transition: all .3s ease;
}

.link:hover #img {
  visibility: visible;
  opacity: 1;
}

<a href="#" class="link">Photography<img src="https://lh4.googleusercontent.com/-OowXWkgMSHI/AAAAAAAAAAI/AAAAAAAAANE/rOf2DCA2AXo/photo.jpg" id="img"></a>

文字悬停＆gt;图像显示有过渡？

3 个答案: