Question

我在下面的codepen中有以下CSS效果。悬停工作正常，悬停图像增长，当鼠标离开时，它逐渐减少回原始大小。我想改变渐进的减少，以便它更快，实际上是即时的。所以基本上当我移开鼠标时，它会立即恢复原始尺寸..有人可以帮忙吗？

HTML：

<div class="photo">
<img src="http://s.cdpn.io/37045/wedding-1.jpg" alt="" class="photo-image" /></div>
<div class="photo"><img src="http://s.cdpn.io/37045/wedding-2.jpg" alt="" class="photo-image" />
</div>

CSS：

.photo-image {
 cursor: pointer;
 position:relative;
 top:9px;
 left:9px;
 width:80px;
 border:1px solid #999; 
 z-index:1000;
 opacity:0.6;
 transition: width 1s, top 1s, left 1s, opacity 1s, z-index .01s;
}

.photo-image:hover{
 width:200px;
 top:-50px;
 left:-50px;
 z-index:1001;
 opacity:1;
}

Codepen示例：http://codepen.io/DouglasGlover/pen/zHBid/

Answer 1

简单！只需将过渡效果从.photo-image移至。photo-image:hover：

.photo-image:hover {
 transition: width 1s, top 1s, left 1s, opacity 1s, z-index .01s;
}

CSS Hover效果与鼠标输出的持续时间

1 个答案: