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

更新为更新的问题

将<p>替换为div，放入<div id="cursor"></div>。

然后用<span>换行，然后使css

.text:hover {
  color: black;
  z-index: 1000000001; /*higher that #cursor's*/
  position: relative; /*this is neede to z-index work*/
}

此外，如果将<span>替换为<div>，请从padding中取出.clickableCursor并将其放到.text（现在为{{1} }，效果会更好。在代码段中查找。

<div>

// 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;

}

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

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

.text {
  padding: 50px
}

.text:hover {
  color: black;
  z-index: 1000000001;
  position: relative;
}

Answer 2

由于光标为白色，因此可以考虑将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>

Answer 3

为什么不使用:hover？效果很好-还是我不明白你的意思。

// 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 {
  position: fixed;
  height: 20px;
  width: 20px;
  background: black;
}

.clickableCursor:hover {
  z-index: 1000000001;
  background: red;
}

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

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

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

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

<div class="container">
  <div id="cursor"></div>
  <div class="clickableCursor one"></div>
  <div class="clickableCursor two"></div>
  <div class="clickableCursor three"></div>
  <div class="clickableCursor four"></div>
</div>

悬停时更改背景或颜色

3 个答案: