Question

我正在使用HTML页面中的div，当我在整个页面中移动鼠标时，我需要切换css样式。

我可以使用任何功能来不断跟踪鼠标位置吗？一旦鼠标距页面顶部至少30 px，我需要将特定div的CSS样式切换为其他CSS样式。虽然鼠标光标在距页面顶部30px的距离内，但我希望div具有特定的样式。如果距页面顶部的距离超过30像素，我希望它切换样式。

假设我在CSS中有2种不同的样式，可以来回切换。

Answer 1

使用mousemove事件监听器，并通过编辑href属性的link来切换样式：

document.body.addEventListener("mousemove" event => {
    if (event.clientY >= 30) {
        document.querySelector("link").setAttribute("href", "style1.css");
    } else {
        document.querySelector("link").setAttribute("href", "style2.css");
    }
});

Answer 2

您可以附加“ mousemove”事件并使用“ event.clientY”获取当前鼠标的最高位置并相应地编写您的要求。

下面是一个示例：

(function(){
        document.body.addEventListener("mousemove", function() {
            if (event.clientY >= 30) {
                document.querySelector(".myDiv").classList.remove('class2');
                document.querySelector(".myDiv").classList.add('class1');
            } else {
                document.querySelector(".myDiv").classList.remove('class1');
                document.querySelector(".myDiv").classList.add('class2');
            }
        });
    })();

 .myDiv {
        height: 200px;
        width: 200px;
        border:1px solid #f00;
    }
    .class1 {
        border-radius: 50%;
    }
    .class2 {
        border-radius: 10%;
    }

<!DOCTYPE html>
<head>
</head>
<body>
    <div class="myDiv"></div>
</body>
</html>

使用鼠标位置更改div样式的Javascript函数

2 个答案: