鼠标悬停 -css如何实现鼠标移至图片上显示遮罩层及文字

最新推荐文章于 2023-08-14 09:53:42 发布

曦曦湘涟

最新推荐文章于 2023-08-14 09:53:42 发布

阅读量5.6k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.csdn.net/Gladys_Huang/article/details/104420171

本文介绍了如何仅使用CSS实现鼠标悬停图片时，出现遮罩层并显示文字的效果，无需借助jQuery。通过CSS选择器和过渡效果，轻松创建动态交互体验。

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

搜索这个效果的时候，很多人都是用css结合jQuery实现的，其实直接用css也可以实现哦~

效果前：

效果后：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css如何实现鼠标移至图片上显示遮罩层及文字