Javascript 当您将鼠标移动到另一个div中的另一个元素上时，如何更改div样式？

我正在处理我的个人项目，当我将光标悬停在另一个div中的h1元素上时，我需要更改div样式，它是我的光标（从宽度和高度10px到宽度和高度100px）

我试过了

h1:hover ~ .cursor{
  width: 100px;
  height: 100px;
}

及

但在这种情况下它不起作用。你知道怎么做吗

HTML:

下面是我的js代码，负责使用鼠标执行以下div：

const cursor = document.querySelector('.cursor');

document.addEventListener('mousemove', e => {
    cursor.setAttribute("style", "top: " + (e.pageY - 5) + "px; left: " + (e.pageX - 5) + "px;");
});

光标工作是因为当我更改代码使“~”工作时，一切都正常。 我对javascript的解决方案持开放态度

---

Codepen版本：

嘿，在CSS中，如果元素是悬停元素的子元素或相邻元素，则只能

更改悬停元素的CSS属性

我将您的
光标div
移动到
H1元素的
附近，并将
+
添加到您的H1悬停css属性：

代码笔：
只需写两个函数，一个在mouseenter上，另一个在mouseleave上

document.getElementById(hoverElement).addEventListener("mouseenter",function(){
     document.getElementById(cursorElement).style.width = "100px"
     document.getElementById(cursorElement).style.height = "100px"})

document.getElementById(hoverElement).addEventListener("mouseleave",function(){
     document.getElementById(cursorElement).style.width = "10px"
     document.getElementById(cursorElement).style.height = "10px"})

在mouseleave上再加一个

document.getElementById(hoverElement).addEventListener("mouseenter",function(){
     document.getElementById(cursorElement).style.width = "100px"
     document.getElementById(cursorElement).style.height = "100px"})

document.getElementById(hoverElement).addEventListener("mouseleave",function(){
     document.getElementById(cursorElement).style.width = "10px"
     document.getElementById(cursorElement).style.height = "10px"})

您需要在H1标记上添加一个类（或id），以便能够在脚本中选择它，例如：

<h1 class="bigCursor">WELCOME</h1>

因此，将“mousemove”事件函数更改为更灵活的编辑样式方式：

document.addEventListener('mousemove', e => {
    cursor.style.top = e.pageY + 'px';
    cursor.style.left = e.pageX + 'px';
});

并将其添加到函数中，以分别增大和减小光标的大小

bigCursor.addEventListener('mouseenter', e => {
    cursor.style.width = "100px";
    cursor.style.height = "100px";
});

bigCursor.addEventListener('mouseleave', e => {
    cursor.style.width = "10px";
    cursor.style.height = "10px";
});

此时，您可能已经意识到光标不在鼠标的中心，因此在
.cursor
CSS标记中添加这一行以解决此问题：

transform: translate(-50%, -50%);

只是一个用户体验说明-光标的放松让它感觉迟钝而且不好。你是对的，但这是一个有趣的个人项目。但我百分之百同意。
bigCursor.addEventListener('mouseenter', e => {
    cursor.style.width = "100px";
    cursor.style.height = "100px";
});

bigCursor.addEventListener('mouseleave', e => {
    cursor.style.width = "10px";
    cursor.style.height = "10px";
});

transform: translate(-50%, -50%);