javascript - 悬停时更改背景或颜色

Question

当光标位于黑色 div 上时，是否有一种简单的方法可以更改颜色或背景颜色，并将它们显示在白色“光标区域”中？

我知道如果你在悬停时更改黑色 div 颜色和 z-index 是可能的，但是有没有办法通过白色光标来做到这一点 - 这样我就不必修改我想要的每个 div显示在光标上方。

编辑:我创建了一个新的 codepen 站点。所以我希望当白色光标位于“Hello”文本上方时它会变成黑色。黑色的“hello”文本应出现在白色区域

// Cursor modified
var cursor = document.getElementById('cursor');
document.addEventListener('mousemove', function(e) {
    e.stopPropagation();
    var x = e.clientX;
    var y = e.clientY;
    cursor.style.left = x + 'px';
    cursor.style.top = y + 'px';
});

// Cursor HOVER modified - When hovering an element
var cursor = document.getElementById('cursor');
var clickableCursor = document.getElementsByClassName('clickableCursor');

for (var i = 0; i < clickableCursor.length; i++) {
    clickableCursor[i].addEventListener('mouseover', () => {
        cursor.style.height = "80px";
        cursor.style.width = "80px";
        cursor.style.animation = "cursorAnimation 5s linear infinite";
        cursor.style.background = "white";
    });
    clickableCursor[i].addEventListener('mouseout', () => {
        cursor.style.height = "40px";
        cursor.style.width = "40px";
        cursor.style.animation = "none";
        cursor.style.border = "2px solid white";
      cursor.style.background = "none";
    });
}

body {
  cursor: none;
}

.container {
  height: 3000px;
  width: 100%;
  position: relative;
  background: orange;
}

#cursor {
  backface-visibility: hidden;
  z-index: 1000000000;
  position: fixed;
  width: 40px;
  height: 40px;
  border: 2px solid white;
  transition: .1s;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition-duration: 100ms;
  transition-timing-function: ease-out;
}

#cursor::before {
  content: '';
  position: absolute;
  height: 7px;
  width: 7px;
  border-radius: 100%;
  background-color: white;
}

.clickableCursor {
  font-size: 50px;
  color: white;
  position: fixed;
  background: black;
  padding: 50px
}

.one {
  top: 50px;
  left: 50px;
}

.two {
  top: 50px;
  right: 50px;
}

<div class="container">
  <div id="cursor"></div>
  <p class="clickableCursor one"> Hello </p>
</div>

Answer 1

您可以考虑将 mix-blend-mode 与变暗值一起使用，因为您的光标是白色的。您必须调整代码以添加额外的包装器以将混合混合模式效果与背景隔离。

您还可以简化 JS 代码并考虑仅 CSS 悬停效果:

// Cursor modified
var cursor = document.getElementById('cursor');
document.addEventListener('mousemove', function(e) {
  e.stopPropagation();
  var x = e.clientX;
  var y = e.clientY;
  cursor.style.left = x + 'px';
  cursor.style.top = y + 'px';
});

body {
  cursor: none;
  margin: 0;
}

.container {
  height: 3000px;
  width: 100%;
  position: relative;
  background: orange;
}

#cursor {
  backface-visibility: hidden;
  z-index: 100000;
  position: fixed;
  width: 40px;
  height: 40px;
  border: 2px solid white;
  background: radial-gradient(circle 4px, #fff 98%, transparent 100%);
  transition: .1s ease-out;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: darken;
}

.clickableCursor {
  position: fixed;
  height: 20px;
  width: 20px;
  background: black;
}

.clickableCursor:hover~#cursor {
  width: 80px;
  height: 80px;
  background: white;
}
.clickableCursor:hover {
  background:blue;
}

.one {
  top: 50px;
  left: 50px;
}

.two {
  top: 50px;
  right: 50px;
}

.three {
  bottom: 50px;
  left: 50px;
}

.four {
  bottom: 50px;
  right: 50px;
}

<div class="container">
  <div style="isolation:isolate">
    <div class="clickableCursor one"></div>
    <div class="clickableCursor two"></div>
    <div class="clickableCursor three"></div>
    <div class="clickableCursor four"></div>
    <div id="cursor"></div>
  </div>
</div>