html css样式实现鼠标悬浮到a标签可以选择图片

1.css代码区

.link-with-image {
      display: inline-block;
      position: relative;
    }

    .link-image {
      position: absolute;
      top: 100%; /* 将图片定位在链接的下方 */
      left: 0;
      display: none; /* 默认隐藏图片 */
    }

    .link-with-image:hover .link-image {
      display: block; /* 悬停时显示图片 */
    }

解释

当我们想要在链接中添加图片时，可以使用以上提供的CSS样式。首先，我们创建一个CSS类名为".link-with-image"，并设置其display属性为inline-block，这将使链接显示为行内块级元素。然后，我们设置一个相对定位的样式类名为".link-image"，并将其上下左右边距设为0，这将使图片与链接的边缘保持一定距离。接下来，我们将链接图像的position属性设置为absolute，并将其top属性设为100%，这将把图像定位在链接的下方。然后，我们将图像的left属性设为0，这将使图像与链接的左侧对齐。最后，我们将图像的display属性设为none，这将使图像在默认情况下是隐藏的。

接下来，我们使用:hover选择器来设置悬停时的样式。当鼠标悬停在.link-with-image类的元素上时，我们将.link-image类的display属性设为block，这将使图像在悬停时显示出来。

2.需要实现代码区

 <table>
        <td width = "200px" bgcolor="#d9ead3">
            <ul align = "left" align="center" bgcolor="#d9ead3">
                <li><a href="#01" class="link-with-image">歌手简介
                    <img src="img/炫酷.png" class="link-image" alt="Hover image">
                </a></li>
                <li><a href="#04">六感音频播放</a></li>
                <li><a href="#05">六感视频播放</a></li>
                <li><a href="#03" class="link-with-image" >人物评价
                    <img src="img/动漫.jpeg" class="link-image" alt="Hover image">
                </a></li>
                <li><a href="#02" class="link-with-image" >音乐单曲
                    <img src="img/可爱.jpeg" class="link-image" alt="Hover image">
                </a></li>
                
             </ul>
        </td>
    </table>

解释

这里使用的是用表格限制其文件框架区域,用无序列表和a链接设置锚点,a标签引用class link-with-image"确认其a标签位置.img标签引用class link-image 设置定义图像方向和位置,设置触发条件,.link-with-image:hover .link-image 鼠标悬停显示图片

a href="#02" 可以填写具体的需要跳转的路径  a href="#"则表示当前页面当前位置  a href="index.html"跳转到具体的html文件

效果图