我设置的 div 光标停留在视频下方

Question

如以下代码片段所示，在我正在处理的项目中，我设置为光标的 div 停留在视频下方。我怎么也爬不上去。不幸的是，为视频标签提供 z-index 并不能解决问题。你能帮忙吗？

var crs = document.querySelector('.cursor');

document.addEventListener('mousemove', (e) => {
  var ds1 = e.clientX - crs.clientWidth / 2;
  var ds2 = e.clientY - crs.clientHeight / 2;

  crs.setAttribute('style', `position: fixed;left:${ds1}px;top:${ds2}px;z-index:999;`);

})

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  cursor: none;
  scroll-behavior: smooth;
}

.cursor {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #000 !important;
  mix-blend-mode: difference;
  transition: padding .4s;
  position: fixed;
  z-index: 999;
  pointer-events: none;
}

#home-vd {
  position: relative;
  z-index: 10;
}

<video class="video" id="home-vd" src="https://www.w3schools.com/tags/movie.mp4"></video>

<div class="cursor" id="cursor">

</div>

Answer 1

似乎 mix-blend-mode: difference 是你的问题；删除它使它看起来很好：

var crs = document.querySelector('.cursor');

document.addEventListener('mousemove', (e) => {
  var ds1 = e.clientX - crs.clientWidth / 2;
  var ds2 = e.clientY - crs.clientHeight / 2;

  crs.setAttribute('style', `position: fixed;left:${ds1}px;top:${ds2}px;z-index:999;`);

})

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  cursor: none;
  scroll-behavior: smooth;
}

.cursor {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #000 !important;
  /* mix-blend-mode: difference; */
  transition: padding .4s;
  position: fixed;
  z-index: 999;
  pointer-events: none;
}

#home-vd {
  position: relative;
  z-index: 10;
}

<video class="video" id="home-vd" src="https://www.w3schools.com/tags/movie.mp4"></video>

<div class="cursor" id="cursor">

</div>

我对混合模式知之甚少，但似乎当使用 difference 作为前景时，它会在 any 背景色上消失：

var crs = document.querySelector('.cursor');

document.addEventListener('mousemove', (e) => {
  var ds1 = e.clientX - crs.clientWidth / 2;
  var ds2 = e.clientY - crs.clientHeight / 2;

  crs.setAttribute('style', `position: fixed;left:${ds1}px;top:${ds2}px;z-index:999;`);

})

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  cursor: none;
  scroll-behavior: smooth;
}

.cursor {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #000 !important;
  mix-blend-mode: difference;
  transition: padding .4s;
  position: fixed;
  z-index: 999;
  pointer-events: none;
}

#home-vd {
  position: relative;
  z-index: 10;
}

.block {
  height: 300px;
  width: 300px;
  background-color: magenta;
  color: white;
}

<h1 class="block">hi hi hi hi</h1>

<div class="cursor" id="cursor">

</div>

如果你使用不同的颜色，你会发现你的结果更有用：

var crs = document.querySelector('.cursor');

document.addEventListener('mousemove', (e) => {
  var ds1 = e.clientX - crs.clientWidth / 2;
  var ds2 = e.clientY - crs.clientHeight / 2;

  crs.setAttribute('style', `position: fixed;left:${ds1}px;top:${ds2}px;z-index:999;`);

})

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  cursor: none;
  scroll-behavior: smooth;
}

.cursor {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #555 !important;
  mix-blend-mode: difference;
  transition: padding .4s;
  position: fixed;
  z-index: 999;
  pointer-events: none;
}

#home-vd {
  position: relative;
  z-index: 10;
}

.block {
  height: 300px;
  width: 300px;
  background-color: magenta;
  color: white;
}

<h1 class="block">hi hi hi hi</h1>

<div class="cursor" id="cursor">

</div>

我敢肯定这里对混合模式了解很多的人可以解释它背后的颜色数学。

我设置的 div 光标停留在视频下方

The div I set as cursor stays under the video

html

javascript

css

position

cursor