我的 Web 元素有问题。 我使用 js 脚本创建了一个“ NEON 队列”效果，当我在屏幕上移动鼠标时它会跟随我的鼠标指针并且效果很好。 我在我的菜单项上使用了一个 css 属性，使它们在悬停时发光。
问题是，它正在工作，但 css 效果仅在 NEON 圈完全消失后才适用。我怎样才能避免这种等待？
起初我认为这是因为圆圈越过 div 但后来我设置了 z-indexes 但它仍然导致问题。
这是html代码:
<!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">
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="main.js"></script>
<title>Document</title>
</head>
<body>
<div id="menu">
<img src="img/logo.png" class="logo"/>
<ul>
<li class="item">WEB</li>
<li class="item">VPS</li>
<li class="item">SERVEUR DEDIE</li>
<li class="item">HOUSING</li>
</ul>
</div>
</body>
</html>
这是脚本，我按照 youtube 教程进行了一些修改:
document.onmousemove = animateCircles;
function animateCircles(event){
var circle = document.createElement("div");
circle.setAttribute("class","circle");
document.body.appendChild(circle);
circle.style.left = event.clientX+'px';
circle.style.top= event.clientY+'px';
deletecircle(circle);
}
function deletecircle(fadeTarget) {
var fadeEffect = setInterval(function () {
if (!fadeTarget.style.opacity) {
fadeTarget.style.opacity = 1;
}
if (fadeTarget.style.opacity > 0) {
fadeTarget.style.opacity -= 0.1;
} else {
clearInterval(fadeEffect);
fadeTarget.parentNode.removeChild(fadeTarget);
}
}, 50);
}
最后是 css 属性:
html{
height: 100%;
}
body {
margin:0;
height: 100%;
background: linear-gradient(#070b13, #1c2641);
background-position: fixed;
background-repeat: no-repeat;
background-size : cover;
background-attachment: fixed;
color: #fdfdfd;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
/* MENU ##################################################################################*/
#menu {
width: 300px;
font-size: 25px;
font-weight: lighter;
margin-left: 10%;
margin-top: 15%;
z-index:10;
}
#menu li{
list-style: none;
padding: 40px;
opacity: 0.7;
transition: all 0.5s ease-in !important;
z-index: 10;
}
/*
#menu li:hover{
color: #00f6ff !important;
opacity: 1 !important;
text-shadow:0 0 20px #31ccff !important;
z-index: 10 !important;
}*/
#menu .logo {
height: 16px;
right: 40px;
top: 40px;
position: absolute;
}
/* MOUSE ANIMATION ##############################################################################*/
.circle {
width: 5px;
height: 5px;
background-color: #00f6ff;
border-radius:50%;
position: absolute;
box-shadow: 0 0 10px #31ccff;
z-index:0;
}
最佳答案
您为圆圈生成的 div 位于菜单项的前面。您设置的 z-index 属性不起作用，因为圆形 div 未相对于菜单项定位。
将圆类设置为具有 -1 的 z-index 似乎可以解决该问题，因为这有效地强制绝对定位的圆 div 出现在页面上其他内容的后面。
您的圈子类别如下:
.circle {
width: 5px;
height: 5px;
background-color: #00f6ff;
border-radius:50%;
position: absolute;
box-shadow: 0 0 10px #31ccff;
z-index:-1;
}
JSFiddle 链接:https://jsfiddle.net/y8vo1jL5/
关于javascript - - 已解决 - Javascript 'onMouseMove'/CSS :hover conflict，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59324324/