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

我只是希望悬停时旗帜向下滑动。正如你在我的小提琴中看到的那样，它的表现很奇怪取决于我先悬停的旗帜。

这可能会以一种更简单的方式解决？ 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

Answer 2

尝试this：

.se, .uk, .de {
    float: left;
    margin-right: 5px;
    margin-top: -40px;
}

.se:hover img, .uk:hover img, .de:hover img {
    margin-top: 20px;
}

Answer 3

看看这个： -

DEMO

<div align="center" class="one"></div> 

.one{ height: 60px; }

Answer 4

这会奏效。 JSFiddle

<强> HTML

<div id="center" align="center">
    <div class="flag" style="width:60px;height:60px;">
        <img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/>
    </div>
    <div class="flag" style="width:60px;height:60px;">
         <img src="http://images.smh.com.au/2013/07/10/4558947/english_flag-60x60.jpg"/>
    </div>
    <div class="flag" 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

.flag {margin-top:-30px; position:relative; display:inline-block;}
.flag:hover { top:15px; }
#center { height: 50px; }

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

4 个答案: