我得到了带有图像的水平菜单,例如:
<div class="menu">
<a href="#"><img src="http://liubavyshka.ru/_ph/17/2/862998023.gif" width="100" height="100"></a>
<a href="#"><img src="http://liubavyshka.ru/_ph/17/2/862998023.gif" width="100" height="100"></a>
<a href="#"><img src="http://liubavyshka.ru/_ph/17/2/862998023.gif" width="100" height="100"></a>
<a href="#"><img src="http://liubavyshka.ru/_ph/17/2/862998023.gif" width="100" height="100"></a>
</div>
fiddle here
我可以使用哪种悬停效果的轻量级变体来使图像在悬停时更加引人注目?
最佳答案
你可以试试这个,它非常简单,轻便,没有脚本,纯 css,看起来不错:
.menu img{
border: 5px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
}
.menu img:hover {
margin-top: 2px;
}
关于jquery - 设置悬停效果的最佳优化方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24141148/