- 已解决 - Javascript 'onMouseMove' / CSS：悬停冲突答案

【问题标题】：- RESOLVED - Javascript 'onMouseMove' / CSS :hover conflict- 已解决 - Javascript 'onMouseMove' / CSS：悬停冲突
【发布时间】：2019-12-13 23:12:50
【问题描述】：

我的网络项目有问题。我使用 js 脚本创建了一个“霓虹灯队列”效果，当鼠标在屏幕上移动时，它会跟随我的鼠标指针，效果很好。我在菜单项上使用了一个 css 属性，使它们在悬停时发光。

问题是，它正在工作，但 CSS 效果仅在霓虹灯圈完全消失后才适用。我怎样才能避免这种等待？

首先我认为这是因为圆圈越过 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;
}

【问题讨论】：

标签： javascript css hover conflict

【解决方案1】：

您为圆圈生成的 div 位于菜单项的前面。您设置的 z-index 属性不起作用，因为圆形 div 没有相对于菜单项定位。

将 circle 类的 z-index 设置为 -1 似乎可以解决问题，因为这有效地强制绝对定位的圆形 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/

【讨论】：

非常感谢它有效！我认为将 0 放到 circlces 和 10 到菜单 div 就足够了，我担心 -1 会在背景后面发送圆圈大声笑但是是的，你解决了我的问题并解决了问题 :)