鼠标悬停时文字消失

最新推荐文章于 2022-07-29 10:26:32 发布

Lily_feng

最新推荐文章于 2022-07-29 10:26:32 发布

阅读量1.8k

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/Lily_feng/article/details/107022713

版权

本文介绍了如何利用CSS3的过渡效果，在鼠标悬停时让页面上的文字消失。通过提供HTML代码和CSS样式，展示了具体的实现方法。

摘要由CSDN通过智能技术生成

鼠标悬停时文字消失

页面总有一些需要会要求我们当鼠标悬停在上面时文字消失，这就需要我们前端人员实现一下，下面用css3过渡实现一下，直接上代码
代码部分
html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标悬停时文字消失</title>
</head>
<body>
<div class="com">
    <div class="btn_img ">
        <h2>鼠标悬停文字消失</h2>
        <ul>
            <li><img src="images/btn.png"><span>鼠标悬停图片文字消失</span></li>
            <li><img src="images/btn.png"><span>鼠标悬停图片文字消失</span></li>
            <li><img src="images/btn.png"><span>鼠标悬停图片文字消失</span></li>
        </ul>
   </div>
</div>
</body>
</html>

css样式部分：