如何实现HTML/CSS中多个图片链接hover时单独向下移动？

核心问题分析 #

你当前的图片使用了内联绝对定位样式，优先级高于外部CSS，直接修改top属性会被内联样式覆盖；另外，<a>标签默认是行内元素，hover触发区域可能不准确。

方法一：使用transform实现平滑移动（推荐，无需修改HTML结构） #

这种方法不用改动现有HTML的内联样式，通过transform: translateY()实现位移，不会和原有定位冲突，还能添加过渡动画让效果更自然。

修改后的完整CSS代码：

<style>
    #directory_buttons{
        display: inline-block;
        height: 500px;
        width: 800px;
        margin: auto;
        position: absolute;
        left: 300px;
        top: 700px;
    }

    /* 给每个a标签设置定位上下文，确保hover区域完整覆盖图片 */
    #directory_buttons a {
        display: inline-block;
        position: relative;
    }

    /* 悬停时图片向下移动5px，可自行调整数值 */
    #directory_buttons a:hover img {
        transform: translateY(5px);
        /* 添加过渡动画，让移动过程更平滑 */
        transition: transform 0.2s ease;
    }
</style>

方法二：迁移内联样式到CSS，修改top属性 #

如果希望通过调整top值实现移动，需要把图片的内联样式迁移到外部CSS，避免优先级冲突：

1. 修改HTML（移除内联样式）：

<body>
    <div id="directory_buttons">
        <a href="https://google.com">
            <img src="images/recs_button.png" alt="推荐按钮">
        </a>
        <a href="https://google.com">
            <img src="images/dude_button.png" alt="Dude按钮">
        </a>
        <a href="https://google.com">
            <img src="images/items_button.png" alt="物品按钮">
        </a>
        <a href="https://google.com">
            <img src="images/comichive_button.png" alt="漫画库按钮">
        </a>           
        <a href="https://google.com">
            <img src="images/letters_button.png" alt="信件按钮">
        </a>
        <a href="https://google.com">
            <img src="images/arts_button.png" alt="艺术按钮">
        </a>
    </div>
</body>

2. 完整CSS代码：

<style>
    #directory_buttons{
        position: absolute;
        left: 300px;
        top: 700px;
        height: 500px;
        width: 800px;
    }

    /* 统一设置a标签为绝对定位，添加过渡动画 */
    #directory_buttons a {
        position: absolute;
        display: block;
        transition: top 0.2s ease;
    }

    /* 逐个设置每个按钮的位置和图片尺寸 */
    #directory_buttons a:nth-child(1) {
        top: 450px;
        left: 220px;
    }
    #directory_buttons a:nth-child(1) img {
        width: 150px;
    }

    #directory_buttons a:nth-child(2) {
        top: 240px;
        left: 400px;
    }
    #directory_buttons a:nth-child(2) img {
        width: 400px;
    }

    #directory_buttons a:nth-child(3) {
        top: 290px;
        left: 250px;
    }
    #directory_buttons a:nth-child(3) img {
        width: 150px;
    }

    #directory_buttons a:nth-child(4) {
        top: 140px;
        left: 340px;
    }
    #directory_buttons a:nth-child(4) img {
        width: 140px;
    }

    #directory_buttons a:nth-child(5) {
        top: 80px;
        left: 510px;
    }
    #directory_buttons a:nth-child(5) img {
        width: 140px;
    }

    #directory_buttons a:nth-child(6) {
        top: 120px;
        left: 690px;
    }
    #directory_buttons a:nth-child(6) img {
        width: 140px;
    }

    /* 悬停时向下移动5px */
    #directory_buttons a:nth-child(1):hover { top: 455px; }
    #directory_buttons a:nth-child(2):hover { top: 245px; }
    #directory_buttons a:nth-child(3):hover { top: 295px; }
    #directory_buttons a:nth-child(4):hover { top: 145px; }
    #directory_buttons a:nth-child(5):hover { top: 85px; }
    #directory_buttons a:nth-child(6):hover { top: 125px; }
</style>

效果说明 #

两种方法都能实现鼠标悬停时图片向下移动的效果，方法一更简洁，无需改动大量HTML；方法二让样式更集中，便于后期维护，你可以根据实际需求选择。

内容的提问来源于stack exchange，提问作者rillybeetle