html - 在 div 悬停上移动 <image>

标签 html css

<分区>


想改进这个问题吗? 通过 editing this post 添加细节并澄清问题.

关闭 9 年前

我试图让 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;
}

最佳答案

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

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

关于html - 在 div 悬停上移动 <image>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21888451/

上一篇:css - 选择时阻止水平滚动

下一篇:css - rgba 颜色代码渲染起来更重吗?

相关文章:

javascript - 如何在 HTML 中将 div 高度滚动到底部?

html - 给一个元素一个默认高度,但强制它缩小以适应它的父元素(只有当它达到指定的最小高度时才允许它溢出)

html - 带有 h1 的 div 不接受 css 颜色

javascript - 单击链接或按钮时复制文本

php - 在 php 中使用 header 重定向

javascript - 无法在 react 组件内以html打印javascript变量文本

css - Firefox 默认页面内容最小宽度?

css - IE8,本地文件的兼容性 View ?

javascript - 在 vanilla JS 中执行脚本期间更新 HTML 元素的内容

css - 将两个 div 放在第三个之上