图标悬停减少过渡

Question

悬停时，我使用过渡来平滑图标增加。 但是问题是，当我将鼠标拖出图标时，它会立即恢复正常大小。 我不确定如何减少图标的数量。 我的意思是，当我将鼠标拖出图标时，它应该以相同的平滑过渡（而非即时）达到正常大小。 我希望你能理解我。 这是我的代码：

 li { display: inline; margin-left: 2.5vh; margin-right: 2.5vh; } .facebook:hover{ cursor: pointer; transform: scale(0.8); transition: all .2s ease-in-out 0s; -webkit-transform: all .2s ease-in-out 0s; } .instagram:hover{ cursor: pointer; transform: scale(0.8); transition: all .2s ease-in-out 0s; -webkit-transform: all .2s ease-in-out 0s; } .dribble:hover{ cursor: pointer; transform: scale(0.8); transition: all .2s ease-in-out 0s; -webkit-transform: all .2s ease-in-out 0s; } .facebook, .instagram, .dribble { transform: scale(0.65); -webkit-transform: scale(0.65); } 

 <a target="_blank" href="#"><li><img src="http://icons.iconarchive.com/icons/danleech/simple/64/facebook-icon.png" class="facebook"></li></a> <a target="_blank" href="#"><li><img src="https://awesomeshop.target.com/img/instagram_logo.png" class="instagram"></li> <a target="_blank" href="#"><li><img src="https://cdn.dribbble.com/assets/favicon-63b2904a073c89b52b19aa08cebc16a154bcf83fee8ecc6439968b1e6db569c7.ico" class="dribble"></li> 

Answer 1

您必须在图标上放置transition属性，因此它不仅在悬停时可用。

 li { display: inline; margin-left: 2.5vh; margin-right: 2.5vh; } .facebook:hover{ cursor: pointer; transform: scale(0.8); -webkit-transform: all .2s ease-in-out 0s; } .instagram:hover{ cursor: pointer; transform: scale(0.8); -webkit-transform: all .2s ease-in-out 0s; } .dribble:hover{ cursor: pointer; transform: scale(0.8); -webkit-transform: all .2s ease-in-out 0s; } .facebook, .instagram, .dribble { transform: scale(0.65); -webkit-transform: scale(0.65); transition: all .2s ease-in-out 0s; } 

 <a target="_blank" href="#"><li><img src="http://icons.iconarchive.com/icons/danleech/simple/64/facebook-icon.png" class="facebook"></li></a> <a target="_blank" href="#"><li><img src="https://awesomeshop.target.com/img/instagram_logo.png" class="instagram"></li> <a target="_blank" href="#"><li><img src="https://cdn.dribbble.com/assets/favicon-63b2904a073c89b52b19aa08cebc16a154bcf83fee8ecc6439968b1e6db569c7.ico" class="dribble"></li> 

Answer 2

您已经错过了常规图像的transition属性。 请遵循w3标准来使用元素。 <a>标签应位于<li>标签内。

 li { display: inline; margin-left: 2.5vh; margin-right: 2.5vh; } .facebook:hover,.instagram:hover,.dribble:hover{ cursor: pointer; transform: scale(0.8); transition: all .2s ease-in-out 0s; -webkit-transform: all .2s ease-in-out 0s; } .facebook, .instagram, .dribble { transform: scale(0.65); -webkit-transform: scale(0.65); transition: all .2s ease-in-out 0s; -webkit-transform: all .2s ease-in-out 0s; } 

 <li> <a target="_blank" href="#"> <img src="http://icons.iconarchive.com/icons/danleech/simple/64/facebook-icon.png" class="facebook"> </a> </li> <li> <a target="_blank" href="#"> <img src="https://awesomeshop.target.com/img/instagram_logo.png" class="instagram"> </a> </li> <li> <a target="_blank" href="#"> <img src="https://cdn.dribbble.com/assets/favicon-63b2904a073c89b52b19aa08cebc16a154bcf83fee8ecc6439968b1e6db569c7.ico" class="dribble"> </a> </li> 

Answer 3

您错过了以下过渡属性：

.facebook, .instagram, .dribble {
  transform: scale(0.65);
  -webkit-transform: scale(0.65);
  transition: all .2s ease-in-out;
}