在鼠标悬停时反转文本颜色

IT技术 javascript html css
2021-03-05 01:09:42

我想在使用自定义 -black- 光标悬停时反转黑色文本。这个GIF演示了效果:

无法用 CSS 和 JS 完成这项工作。我猜是混合模式、剪切蒙版、伪元素和过滤器的某种组合。

以下代码使光标变为白色,但不会使黑色文本变为白色。听起来很抽象?这是一个演示

mix-blend-mode: difference;
filter: invert(1) grayscale(1) contrast(2);

我已经在 Codepen 上设置了一个操场来捣乱,但还没有找到解决方案。

如何使用 CSS 和 Javascript 重新创建这种悬停效果?

2个回答

这是一个使用clip-path. 诀窍是将文本复制为具有不同文本颜色的两层,然后我使用clip-path随鼠标移动调整的显示顶部的一层

这是使用radial-gradient和不复制可以同时处理多个元素的文本的另一个想法

具有类似想法的相关问题:堆叠圆在边界半径上产生黑条

万分谢意!当光标在原始 JS 代码中通过 transform: matrix 缩放和移动时,这是如何工作的?codepen.io/danoszz/pen/GxreBV
2021-05-10 01:09:42
@danoszz 正如您在我的代码中看到的那样,光标和与剪辑路径或径向渐变一起使用的圆圈具有相同的尺寸……因此,如果您缩放圆圈,则需要更改尺寸以使它们匹配
2021-05-14 01:09:42

制造使用的解决方案mix-blend-mode: difference;.cursor

优点是 - 我们不需要向我们用圆形鼠标悬停的所有元素添加任何类或 javascript。

缺点是 - 这种解决方案不太稳定,因为mix-blend-mode它有点原始技术。它需要heightbodyand 中进行设置html,并且background-color对于 来说是严格body

与部分.cursorCSS和JavaScript -我借了部分形式@Temani阿菲夫的解决方案。谢谢你,希望你不要介意,因为试图把它写得更好是没有意义的。但是我在滚动时添加了+window.scrollX+window.scrollY正确的.cursor工作。

更多关于mix-blend-mode你可以在这里阅读https://caniuse.com/#search=mix-blend-modehttps://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

document.body.onmousemove = function(e) {
  document.documentElement.style.setProperty('--x', (e.clientX+window.scrollX) + 'px');
  document.documentElement.style.setProperty('--y', (e.clientY+window.scrollY) + 'px');
}
html {
  height: 100%; /* requires for stable body height */
}

body {
  min-height: 100%; /* requires for 'mix-blend-mode' */
  cursor: none;
  color: #000;
  background-color: #fff; /* requires for 'mix-blend-mode' */
}

.cursor {
  position: absolute;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 50%;
  top: var(--y, 0);
  left: var(--x, 0);
  transform: translate(-50%, -50%);
  z-index: 2;
  mix-blend-mode: difference;
}
<h1>WORK</h1>
<span class="cursor"></span>