通过css实现文字遮罩

最新推荐文章于 2024-08-25 20:15:05 发布

Ruoyang666

最新推荐文章于 2024-08-25 20:15:05 发布

阅读量1.5k

点赞数

分类专栏：自我笔记文章标签：文字遮罩鼠标移出事件

本文链接：https://blog.csdn.net/ruoyang666/article/details/85212200

版权

自我笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

图像宽200px，高300px；文字区域宽200px，高200px。鼠标移动到图像上后，文字区域上移，距离图像上边150px。

<html>
   <style type="text/css">
       .class_outer {
           display: block;
           width: 400px;
           height: 500px;
           margin: 10px auto;
           position: relative;
           overflow: hidden;
       }
       .class_cover {
           width: 200px;
           height: 200px;
           line-height: 50px;
           background-color: rgba(0, 0, 0, .50);
           color: #FFFFFF;
           font-size: 26px;
           position: absolute;
           left: 0px;
           bottom: 0px;
       }
       .class_cover2 {
           width: 200px;
           height: 200px;
           line-height: 50px;
           background-color: rgba(0, 0, 0, .50);
           color: #FFFFFF;
           font-size: 26px;
           position: absolute;
           left: 0px;
           top:150px;
       }

</style>

   <body>
       <div class="class_outer">
       <img src="yyy.jpg" width="200px" height="300px" border="0" οnmοuseοver="imgover()" οnmοuseοut="imgout()"/>
       <div class="class_cover" id="tt">亲，文字遮罩会了吗？</div> </div>

   </body>
   <script type="text/javascript">
       function imgover(){
           document.getElementById( "tt" ).className = "class_cover2";
       }
       function imgout(){
           document.getElementById( "tt" ).className = "class_cover";
       }
   </script>
</html>