css - 将鼠标悬停在图像上无法正常工作

Question

<div align="center">
<div class="se" style="width:60px;height:60px;"><img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/></div>
<div class="uk" style="width:60px;height:60px;"><img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/></div>
<div class="de" style="width:60px;height:60px;"><img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/></div></div>
<div> i dont want this menu div to jump up and down when hover</div>

CSS文件:

.se {margin-top:-30px;}
.se:hover {margin-top:-15px;}
.uk {margin-top:-60px; margin-left:-150px;}
.uk:hover {margin-top:-45px;}
.de{margin-top:-60px; margin-left:150px;}
.de:hover {margin-top:-45px;}

我只想让旗帜在悬停时向下滑动。正如您在我的 fiddle 中看到的那样，它表现得很奇怪，这取决于我首先悬停的标志。

这可能可以用更简单的方法解决？ http://jsfiddle.net/XScjm/1/

Answer 1

我认为你用错误的方式来完成你想要的，首先你不能用 margin 偏移图像因为这会影响元素周围的所有元素。以及您尝试定位每个 <div> 的方式不推荐带边距。

尝试这样做:

.center {
    text-align:center;
}
.se, .uk, .de {
    position:relative;
    display:inline-block;
    cursor:pointer;
}
.se:hover, .uk:hover, .de:hover {
    top:15px;
}

检查这个 Demo