鼠标悬停遮罩效果-优快云博客

本文链接：https://blog.youkuaiyun.com/cvper/article/details/80220518

<!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>遮罩效果实现</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
         .first{
             width:200px;
             height:200px;
             border:2px solid red;
         }
         .second{
             width:150px;
             height:150px;
             border:2px solid green;
             position:relative;
         }

         .second div{
             width:100px;
             height:100px;
             background:yellow;
         }

         .second p{
             width:100px;
             height:100px;
             background-color:rgba(0,0,0,0.6);
             position:absolute;
             top:0;
             left:0;
             display:none;
             color:#fff;
         }
    </style>
</head>
<body>
     <div class="first">
         <div class="second">
             <div>我是正常显示的内容</div>
             <p id="obj">我是遮罩</p>
         </div>
     </div>
     <script>
            var second=document.getElementsByClassName("second")[0];
            var obj=document.getElementById("obj");
            second.onmouseover=function(){
                obj.style.display="block";
            }
            second.onmouseout=function(){
                obj.style.display="none";
            }
            
     </script>
</body>
</html>