本文旨在解决在web开发中，当鼠标跟随元素与css关键帧动画元素重叠时，鼠标跟随元素意外消失的问题。通过深入探讨css的层叠上下文（stacking context）和z-index属性，我们将展示如何正确设置元素的堆叠顺序，确保鼠标跟随元素始终保持可见，即使下方元素正在进行复杂的动画效果。
在Web前端开发中，我们经常会遇到需要实现鼠标跟随效果的场景，例如自定义光标、跟随提示等。同时，页面上可能存在一些通过CSS关键帧动画实现动态效果的元素，例如按钮的抖动、图片的闪烁等。一个常见的问题是，当鼠标跟随元素移动到正在进行CSS动画的元素上方时，鼠标跟随元素会突然消失或被遮挡，导致用户体验受损。
例如，一个小的“球形”div通过JavaScript的mousemove事件跟随鼠标移动，而另一个div中的图片在鼠标悬停时触发CSS shake动画。当鼠标悬停在抖动图片上时，跟随鼠标的“球形”div便会消失。这并非动画本身的问题，而是元素在Z轴上的堆叠顺序（stacking order）出现了冲突。
理解层叠上下文与z-index
要解决上述问题，我们需要理解CSS中两个核心概念：层叠上下文（Stacking Context）和z-index属性。
- z-index属性：z-index用于指定定位元素（position属性值为relative、absolute、fixed或sticky的元素）在Z轴上的堆叠顺序。z-index值越大，元素在视觉上就越靠近用户（即在其他元素之上）。
-
层叠上下文（Stacking Context）：层叠上下文是HTML元素的一个三维概念，它决定了元素及其子元素在Z轴上的渲染顺序。每个层叠上下文都是独立的，其内部的z-index值只在当前上下文中有效。创建层叠上下文的常见方式包括：
- 根元素（<html>）
- position属性值为absolute、relative、fixed或sticky，并且z-index属性值不是auto的元素。
- opacity属性值小于1的元素。
- transform、filter、perspective、clip-path、mask等CSS属性非none的元素。
- will-change属性指定了任何可以创建层叠上下文的属性。
当两个元素发生重叠时，浏览器会根据它们的层叠上下文和z-index值来决定哪个元素在上方。如果两个元素处于同一个层叠上下文，并且都是定位元素，那么z-index值更高的元素将覆盖z-index值较低的元素。
立即学习“前端免费学习笔记（深入）”；
解决方案：调整z-index
针对鼠标跟随元素被动画元素遮挡的问题，最直接有效的解决方案是为鼠标跟随元素设置一个更高的z-index值，以确保它始终位于动画元素之上。
假设我们的鼠标跟随元素ID为#circle，动画元素ID为#shakingimage。它们都已经被设置为定位元素（例如position: absolute或position: relative），这使得z-index属性能够生效。
我们将#circle的z-index设置为一个比#shakingimage更高的值。
示例代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标跟随与CSS动画层叠问题</title>
<style>
/* CSS样式 */
body {
margin: 0;
height: 100vh; /* 确保body有足够高度，用于演示 */
overflow: hidden; /* 防止滚动条影响鼠标跟随 */
background-color: #f8f8f8;
font-family: Arial, sans-serif;
}
#circle {
/* 鼠标跟随元素 */
max-width: 30px; /* 示例尺寸 */
height: 30px;
border-radius: 50%;
background-color: rgba(0, 128, 128, 0.7); /* 示例颜色 */
position: absolute;
pointer-events: none; /* 确保鼠标事件穿透，不影响下方元素 */
z-index: 9999; /* 设置一个较高的z-index值，确保其在最上层 */
transform: translate(-50%, -50%); /* 使光标中心对准鼠标点 */
transition: transform 0.05s ease-out; /* 平滑移动效果 */
box-shadow: 0 0 10px rgba(0, 128, 128, 0.5);
}
#shakingimage {
/* 动画元素 */
width: 250px; /* 示例尺寸 */
height: 150px;
background-color: #ffffff;
border: 2px solid #ddd;
display: flex;
justify-content: center;
align-items: center;
margin: 150px auto; /* 居中显示 */
position: relative; /* 必须是定位元素才能设置z-index */
z-index: 1; /* 动画元素的z-index可以保持默认或设置为一个较低的值 */
font-size: 20px;
color: #555;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
}
#shakingimage:hover {
animation: shake 0.5s infinite; /* 鼠标悬停时触发抖动动画 */
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
</style>
</head>
<body>
<!-- HTML结构 -->
<div id="circle"></div>
<div id="shakingimage">鼠标悬停我抖动</div>
<script>
// JavaScript逻辑
const circle = document.getElementById('circle');
document.addEventListener('mousemove', (e) => {
// 更新circle的位置，使其跟随鼠标
circle.style.left = e.clientX + 'px';
circle.style.top = e.clientY + 'px';
});
</script>
</body>
</html>在上述代码中，我们为#circle元素设置了z-index: 9999;，这是一个非常高的值，足以确保它在大多数情况下都位于页面的最顶层。而#shakingimage的z-index被设置为1，或保持默认的auto（在定位元素中通常等同于0），使其位于#circle之下。同时，pointer-events: none;属性被添加到#circle上，以确保鼠标事件能够穿透它，不会干扰下方元素的交互（例如#shakingimage的hover效果）。
注意事项
- position属性是前提：z-index属性只对定位元素（position属性值不是static的元素）有效。如果你的元素没有设置position属性，或者其值为static，那么设置
