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文件
效果图