CSS鼠标经过文字显示图片效果

最新推荐文章于 2021-11-29 14:53:55 发布

冰城警幻

最新推荐文章于 2021-11-29 14:53:55 发布

阅读量8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：网站技术文章标签： css image border class

本文链接：https://blog.youkuaiyun.com/cityice/article/details/6187599

网站技术专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用纯CSS实现鼠标悬停时文字显示图片的效果。通过设置相对定位及绝对定位，配合:hover伪类，使得鼠标经过指定文字时显示预设的图片，并且能够调整图片出现的位置。

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

在处理鼠标经过文字特效时，不仅仅JS可以，用CSS也可以实现，这里提供一种方法：

<html> <title>鼠标经过文字显示图片效果</title> </head> <body> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .thumbnail{ position: relative; z-index: 0; } .thumbnail:hover{ background-color: transparent; z-index: 50; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: lightyellow; padding: 1px; left: -1000px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; } .thumbnail:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; top: 0; left: 55px; /*position where enlarged image should offset horizontally */ } </style> <a class="thumbnail" href="链接" mce_href="链接">文字一<img src="图片地址" mce_src="图片地址" width="210" border="0"></a> <a class="thumbnail" href="链接" mce_href="链接">文字二<img src="图片地址" mce_src="图片地址" width="210" border="0"></a> <a class="thumbnail" href="链接" mce_href="链接">文字三<img src="图片地址" mce_src="图片地址" width="210" border="0"></a> <a class="thumbnail" href="链接" mce_href="链接">文字四<img src="图片地址" mce_src="图片地址" width="210" border="0"></a> </body> </html>