在div悬停上移动<img/>

Question

我试图让div内的图像移动而不移动div内的其他东西，这是我的代码：

<a href="#">
    <div id="cont" align="center">
        <img id="img_nav" src="img/menu_galeria.png">
        <p class="text_nav">Galeria</p>
    </div>
</a>

这是我的css：

#cont{
    margin-top: 15px;
    float: right;
    margin-left: 20px;
}
#cont:hover > #img_nav{
    margin-top: -5px;
}

Answer 1

而不是调整边距...只需向上移动图像的位置：

<style type="text/css">
    #cont
    {
        margin-top: 15px;
        float: right;
        margin-left: 20px;
    }
    #cont:hover > #img_nav
    {
        position: relative;
        top: -5px;
    }
</style>

Answer 2

尝试将zindex或clear属性添加到您的css属性中，例如

#cont:hover{
    margin-top: -5px;
    z-index:999;
    clear:both;
    position:absolute;
}