Question

我得到了带有图像的水平菜单，例如：

<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>

小提琴here

我可以使用什么轻量级的悬停效果来使图像在悬停时更明显？

Answer 1

你可以试试这个，它非常简单，轻巧，没有脚本，纯粹的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;
}

example

设置悬停效果的最佳优化方式

1 个答案: