代码之家 › 专栏 › 技术社区 › SHRUBBY

只有当另一个元素悬停在上面时,我才能更改该元素的样式?

cursor css html javascript

SHRUBBY · 技术社区 · 1 年前

我正在尝试编写一个自定义光标,当鼠标悬停在某些元素上时,它会更改样式。

如我的代码所示,我试图定义一个函数,该函数在将鼠标悬停在div上时更改了光标的样式,并使用 <div id="control" onmouseover="cursorFill()></div>" 。我本以为光标在悬停时会发生变化,一旦它不再位于div上,就会变回,但它却变了,没有变回。

如果可能的话,我更喜欢使用普通的JavaScript(没有jQuery或其他扩展)。

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

function cursorFill() {
  document.getElementById("cursor").style.backgroundColor = "#fff";
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: none;
}

body {
  background-color: #000;
  align-items: center;
  justify-content: center;
  display: flex;
}

#cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 5px solid #fff;
  background-color: transparent;
  transform: translate(-50%, -50%);
  pointer-events: none;
  mix-blend-mode: difference;
}

#control {
  background-color: #fff;
  width: 10em;
  height: 10em;
  margin-top: 50vh;
}

<div id="cursor"></div>
<div id="control" onmouseover="cursorFill()"></div>

2 回复 | 直到 1 年前

Rory McCrossan Hsm Sharique Hasan 1 年前

问题是因为你只在鼠标悬停时设置背景颜色 #control 。当鼠标移动时,需要将其重新设置回其原始值叶子元素也是。

请注意,在以下示例中,我删除了内联 onmouseover 属性,因为使用这些是不好的做法,应该避免。请在JS中使用不引人注目的事件处理程序。

还要注意,我修改了逻辑,从元素中添加/删除了一个CSS类。这是为了避免在JS代码中有任何CSS逻辑。

最后,我将活动从 mouseover ,它为 每个像素 鼠标悬停在元素上,对于这个用例来说,这是过分的 mouseenter ,仅在鼠标首次进入目标元素的边界时激发一次。

做出这些更改后,您的代码将如下所示:

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

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

control.addEventListener('mouseenter', () => cursor.classList.add('over'));
control.addEventListener('mouseleave', () => cursor.classList.remove('over'));

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: none;
}

body {
  background-color: #000;
  align-items: center;
  justify-content: center;
  display: flex;
}

#cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 5px solid #fff;
  background-color: transparent;
  transform: translate(-50%, -50%);
  pointer-events: none;
  mix-blend-mode: difference;
}
#cursor.over {
  background-color: #FFF;
} 

#control {
  background-color: #fff;
  width: 10em;
  height: 10em;
  margin-top: 50vh;
}

<div id="cursor"></div>
<div id="control"></div>

Reda Bourial 1 年前

您可以使用事件mouseenter和mouseleave来实现这一点,下面是一个示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      cursor: none;
    }

    body {
      background-color: #000;
      align-items: center;
      justify-content: center;
      display: flex;
    }

    #cursor {
      position: fixed;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 5px solid #fff;
      background-color: transparent;
      transform: translate(-50%, -50%);
      pointer-events: none;
      mix-blend-mode: difference;
    }

    #control {
      background-color: #fff;
      width: 10em;
      height: 10em;
      margin-top: 50vh;
    }
  </style>
  <title>Cursor Example</title>
</head>
<body>
  <div id="cursor"></div>
  <div id="control"></div>
  <script>
    const cursor = document.querySelector('#cursor');
    const control = document.querySelector('#control');

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

    control.addEventListener('mouseenter', cursorFill);
    control.addEventListener('mouseleave', () => {
      cursor.style.backgroundColor = 'transparent';
    });

    function cursorFill() {
      cursor.style.backgroundColor = '#fff';
    }
  </script>
</body>
</html>