html相对定位实现鼠标滑过出现遮罩层

73次阅读
没有评论

要使用相对定位实现鼠标滑过出现遮罩层,我们需要做以下几个步骤:

  1. 在需要添加遮罩层的元素上创建一个父容器,并设置其相对定位(position: relative)。
  2. 在父容器内部创建一个遮罩层元素,并设置其绝对定位(position: absolute)和宽高等样式。
  3. 使用JavaScript监听鼠标事件,在鼠标滑过时显示遮罩层,鼠标离开时隐藏遮罩层。

下面是一个完整的HTML页面,演示了如何使用相对定位实现鼠标滑过出现遮罩层。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标滑过出现遮罩层</title>
    <style>
        /* 父容器的样式 */
        .container {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: #ccc;
        }

        /* 遮罩层的样式 */
        .mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
        }
    </style>
</head>
<body>
<div class="container">
    <img src="https://picsum.photos/200/200" alt="示例图片">
    <div class="mask"></div>
</div>

<script>
    // 获取父容器和遮罩层元素
    var container = document.querySelector('.container');
    var mask = document.querySelector('.mask');

    // 显示遮罩层
    container.addEventListener('mouseenter', function(e) {
        mask.style.display = 'block';
    });

    // 隐藏遮罩层
    container.addEventListener('mouseleave', function(e) {
        mask.style.display = 'none';
    });
</script>
</body>
</html>

在上面的代码中,我们定义了一个父容器和一个遮罩层元素,并使用相对定位和绝对定位设置它们的位置。在CSS中,我们设置了父容器的样式,包括宽度、高度、背景颜色和相对定位。我们还设置了遮罩层的样式,包括绝对定位、宽度、高度、背景颜色和初始状态下的显示属性(display: none)。在JavaScript中,我们监听了鼠标事件,并使用事件处理程序显示或隐藏遮罩层。最终,我们将这些代码组合起来,形成了一个完整的HTML页面。

正文完
 
评论(没有评论)