将文字置于图片之上，防止鼠标频繁交替触发mouseenter和mouseleave事件

最新推荐文章于 2024-05-17 13:52:13 发布

i_Lucien

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量1.2k

点赞数 1

分类专栏： web 文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/i_Lucien/article/details/122690350

版权

web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

问题描述：

使用标准文档流进行布局，鼠标会频繁触发 mouseenter 和 mouseleave 事件，无法正常修改 spsan 的位置。
该问题需将文字（即 li）置于图片（即 span）之上，防止触发 mouseleave 事件。
可以将最外层的大盒子采用绝对定位进行布局，在大盒子内部指定 z-index 指定重叠层级。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>筋斗云案例</title>
    <link rel="stylesheet" href="css/cloud.css">
    <script src="js/animate.js"></script>
    <script src="js/cloud.js"></script>
</head>
<body>
<div class="c-nav">
    <span class="cloud"></span>
    <ul>
        <li><a class="current" href="javascript:;">师资力量</a></li>
        <li><a href="javascript:;">活动策划</a></li>
        <li><a href="javascript:;">企业文化</a></li>
        <li><a href="javascript:;">招聘信息</a></li>
        <li><a href="javascript:;">公司简介</a></li>
        <li><a href="javascript:;">谁是佩奇</a></li>
        <li><a href="javascript:;">我是佩奇</a></li>
    </ul>
</div>
</body>
</html>

window.addEventListener('load', function () {
    // 获取元素
    let cloud = document.querySelector('.cloud');
    let li_lists = document.querySelectorAll('.c-nav ul li');
    let cloud_origin_position = cloud.offsetLeft;

    for (let i = 0; i < li_lists.length; i++) {
        li_lists[i].addEventListener('mouseenter', function () {
            easeAnimate(cloud, this.offsetLeft);
        });

        li_lists[i].addEventListener('mouseleave', function () {
            easeAnimate(cloud, cloud_origin_position);
        });

        li_lists[i].addEventListener('click', function () {
            cloud_origin_position = cloud.offsetLeft;
        })
    }
});

* {
    margin: 0;
    padding: 0;
}
ul li {
    list-style: none;
}

body {
    background-color: black;
}

/* 把主体设置为绝对定位，*/
/* 同时将 span 的 z-index 设置为 -1，li 的 z-index 设置为 1，*/
/* 即将文字置于图片之上，防止鼠标频繁交替触发 mouseenter 和 mouseleave 事件 */
.c-nav {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
}

.c-nav li {
    float: left;
    margin: 0 20px;
}

.c-nav li a {
    color: red;
    font-size: 23px;
    text-decoration: none;
    z-index: 1;
}

.cloud {
    position: absolute;
    width: 100px;
    height: 50px;
    background: url("../images/cloud.png") no-repeat;
    background-size: 100px 50px;
    z-index: -1;
}

在这里插入图片描述

i_Lucien

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
将文字置于图片之上，防止鼠标频繁交替触发mouseenter和mouseleave事件

问题描述：使用标准文档流进行布局，鼠标会频繁触发 mouseenter 和 mouseleave 事件，无法正常修改 spsan 的位置。该问题需将文字（即 li）置于图片（即 span）之上，防止触发 mouseleave 事件。可以将最外层的大盒子采用绝对定位进行布局，在大盒子内部指定 z-index 指定重叠层级。代码示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-
复制链接

扫一扫