Question

我有一个名为hoverZone的div，另一个叫followMouse。 The followMouse div，顾名思义总是跟着鼠标，问题是在我的CSS中我有这个规则永远不会被应用：

.hoverZone:hover ~ .followMouse {
box-shadow: 0px 0px 30px #fff;
}

有关如何绕过此问题的任何想法？

＆＃13;

window.addEventListener("mousemove", move, false);

function move(e){
    var mouseX = parseInt(e.clientX);
    var mouseY = parseInt(e.clientY);
     
    var follower = document.querySelector(".followMouse");
    follower.style.left = mouseX + "px";
    follower.style.top = mouseY + "px";
}

＆＃13;

.hoverZone {
    display: block;
    height: 90px;
    width: 90px;
    position: absolute;
}

.hoverZone:hover ~ .followMouse {
    background-color: blue;
    box-shadow: 0px 0px 30px #fff;
}

.followMouse{
    width: 90px;
    height: 90px;
    background-color: orange;
}

＆＃13;

<div class="hoverZone"></div>
<div class="followMouse"></div>

＆＃13;

Answer 1

.followMouse默认为position:static;，因此更改top，left等对元素没有任何影响。将position: absolute;提交给.followMouse将解决您的问题。

＆＃13;

window.addEventListener("mousemove", move, false);

function move(e){
    var mouseX = parseInt(e.clientX);
    var mouseY = parseInt(e.clientY);
     
    var follower = document.querySelector(".followMouse");
    follower.style.left = mouseX + "px";
    follower.style.top = mouseY + "px";
}

＆＃13;

.hoverZone {
    display: block;
    height: 90px;
    width: 90px;
    position: absolute;
}

.hoverZone:hover ~ .followMouse {
    background-color: blue;
    box-shadow: 0px 0px 30px #000;
}

.followMouse{
    width: 90px;
    height: 90px;
    background-color: orange;
    position:fixed;
}

＆＃13;

<div class="hoverZone"></div>
<div class="followMouse"></div>

＆＃13;

悬停事件不适用于鼠标后面的div

1 个答案: