鼠标移至a标签，浮动显示图片

最新推荐文章于 2023-11-03 10:29:29 发布

原创最新推荐文章于 2023-11-03 10:29:29 发布 · 5.3k 阅读

3 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

13 篇文章

订阅专栏

本文介绍CSS中:hover选择器的使用方法，不仅限于链接，还可用在所有元素上。通过实例展示了如何利用:hover使图片在鼠标悬停时显示，包括代码实现细节。此外，文章还提及了:link、:visited和:active选择器的区别及应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

:hover 选择器用于选择鼠标指针浮动在上面的元素。

提示：:hover 选择器可用于所有元素，不只是链接。

提示：:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active选择器用于活动链接。

注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。

代码如下：

<style>
	

    a img {

          display:none; 

    }

    a:hover img { 

          display:block;

    }

    #sweep_code{

		  position: absolute;
		  right: 20px;
		  top:280px;

    }

</style>
<a style="float: right;margin-right: 120px;margin-top: 20px">
   <div id="sweep_code">
       <img src=".../images/sweep_code.png" alt="" id="img"  width="100" height="100" />
   </div>
</a>