我想在使用自定义“黑色”光标悬停黑色文本时反转黑色文本。 这个GIF演示了效果：
我无法用 CSS 和 JS 来实现这个工作。我猜是与混合混合模式、剪贴蒙版、伪元素和过滤器的一些组合。
以下代码使光标变为白色，但不允许黑色文本变成白色。听起来很抽象？这是一个demo.
// All creds go to https://murmure.me ????
const cursor = $(".cursor"),
body = $("body"),
slider = $(".slider"),
nav = $(".nav"),
fail = $(".fail"),
invert = $(".invert"),
nav_open_menu = $(".navopen"),
wwidth = $(window).width(),
wheight = $(window).height(),
cursorMove = function() {
var e, n;
return (
body.addClass("cursor-on"),
cursor.css({
transform: "matrix(1, 0, 0, 1, " + wwidth / 2 + ", " + wheight / 2 + ")"
}),
(e = wheight / 2),
(n = 0.65 * wwidth / 2),
n > e ? e : n,
$(window).on("mousemove", function(e) {
var n, t;
if (
((window.x = e.clientX),
(window.y = e.clientY),
cursor.css({
transform: "matrix(1, 0, 0, 1, " + x + ", " + y + ")"
}),
!nav.hasClass("overlay-visible"))
)
return (
(n = Math.floor((x - 60) / 5)),
(t = Math.floor((y - 60) / 5)),
n < 20 && t < 20
? nav_open_menu.addClass("magnetize").css({
transform: "scale(1.3) translate3d(" + n + "px, " + t + "px, 0)"
})
: nav_open_menu.removeClass("magnetize").attr("style", "")
);
})
);
};
cursorBind = function() {
var e, n, t;
if (
((n = cursor.find("span")).removeClass("link external new"),
(e = $(".focus")),
(t = $(".slack")),
$(window).on({
mouseenter: function() {
return n.removeClass("off");
},
mouseleave: function() {
return n.addClass("off");
}
}),
$("a, button, .cursor-link, .sort-listing th").on({
mouseenter: function() {
var e;
return (
(e = $(this).hasClass("external") ? "link external" : "link"),
n.addClass(e)
);
},
mouseleave: function() {
return n.removeClass("link external");
}
}),
$("h1").on({
mouseenter: function() {
var e;
return (
(e = $(this).hasClass("external") ? "invert external" : "invert"),
n.addClass(e)
);
},
mouseleave: function() {
return n.removeClass("invert external");
}
}),
e.length &&
e.find("a").on({
mouseenter: function() {
return n.addClass("new");
},
mouseleave: function() {
return n.removeClass("new");
}
}),
slider.length &&
slider.on({
mouseenter: function() {
var e;
return (
(e = $(this).hasClass("full") ? "click" : "drag"), n.addClass(e)
);
},
mouseleave: function() {
return n.removeClass("drag click");
}
}),
t.length &&
t.on({
mouseenter: function() {
return n.addClass("light");
},
mouseleave: function() {
return n.removeClass("light");
}
}),
fail.length)
)
return fail.on({
mouseover: function() {
return n.addClass("relol");
},
mouseleave: function() {
return n.removeClass("relol");
}
});
};
cursorMove();
cursorBind();body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
h1 {
font-weight: 500;
font-size: 9vw;
}
*, *:before, *:after {
box-sizing: border-box;
}
body {
min-height: 100vh;
background-color: #fff;
color: #000;
text-rendering: optimizelegibility;
line-height: 1.5;
/* System stack font-family mentioned by @wooorm */
font-family: Roboto, -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Oxygen, Ubuntu, Cantarell, Open Sans, sans-serif;
}
.cursor-on {
cursor: none;
}
.cursor-on * {
cursor: none;
}
.cursor-on .cursor {
position: fixed;
z-index: 10;
pointer-events: none;
top: -1rem;
left: -1rem;
}
.cursor-on .cursor > span {
display: block;
width: 2rem;
height: 2rem;
border-radius: 2rem;
background: #f8e71c;
transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
transform: scale(1);
}
.cursor-on .cursor > span.off {
transform: scale(0);
}
.cursor-on .cursor > span.link {
transform: scale(1.5);
background-color: #0000ed;
}
.cursor-on .cursor > span.link.external:after {
content: "↗";
display: block;
white-space: pre;
color: #fff;
font-weight: 100;
font-size: 1rem;
text-align: center;
width: 100%;
line-height: 1;
padding-top: 0.6em;
}
.cursor-on .cursor > span.light {
background: #fff;
}
.cursor-on .cursor > span.drag, .cursor-on .cursor > span.click, .cursor-on .cursor > span.relol, .cursor-on .cursor > span.new {
transform: scale(2.5);
}
.cursor-on .cursor > span.drag:after, .cursor-on .cursor > span.click:after, .cursor-on .cursor > span.relol:after, .cursor-on .cursor > span.new:after {
display: block;
content: "";
white-space: pre;
color: #fff;
font-size: 5px;
text-align: center;
width: 100%;
line-height: 1;
padding-top: calc((2rem / 2) - 2.5px);
color: #000;
}
.cursor-on .cursor > span.drag:after {
content: "play";
}
.cursor-on .cursor > span.click:after {
content: "click\A click";
}
.cursor-on .cursor > span.relol:after {
content: "click\A me";
padding-top: calc((2rem / 2) - 5px);
}
.cursor-on .cursor > span.new:after {
content: "new\A new";
}
.cursor-on:active .cursor > span {
transform: scale(0.75);
}
.cursor-on:active .cursor > span.link {
transform: scale(1);
}
.cursor-on:active .cursor > span.drag, .cursor-on:active .cursor > span.click, .cursor-on:active .cursor > span.relol, .cursor-on:active .cursor > span.new {
transform: scale(2);
}
.grid {
background-color: #fff;
}
.grid--column--item {
background-color: #000;
}
.grid--column.sticky .grid--column--item {
border-color: #000;
}
.cursor-on .cursor > span {
background: black;
}
.cursor-on .cursor > span.invert {
transform: scale(2.5);
mix-blend-mode: difference;
filter: invert(1) grayscale(1) contrast(2);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="invert">Work</h1>
<div class="cursor" >
<span class="off"></span>
</div>mix-blend-mode: difference;
filter: invert(1) grayscale(1) contrast(2);
我已经设置了一个Codepen 上的游乐场折腾了一下，但还没找到解决办法。
如何使用 CSS 和 Javascript 重新创建这种悬停效果？
这是一个使用的想法clip-path。诀窍是复制文本，使其具有不同文本颜色的两层，然后我使用clip-path我通过鼠标的移动进行调整。
var h =document.querySelector('h1');
var p= h.getBoundingClientRect();
var c= document.querySelector('.cursor');
document.body.onmousemove = function(e) {
/*Adjust the cursor position*/
c.style.left=e.clientX+'px';
c.style.top=e.clientY+'px';
/*Adjust the clip-path*/
h.style.setProperty('--x',(e.clientX-p.top)+'px');
h.style.setProperty('--y',(e.clientY-p.left)+'px');
}body {
cursor:none;
}
h1 {
color: #000;
display:inline-block;
margin:50px;
text-align: center;
position:relative;
}
h1:before {
position:absolute;
content:attr(data-text);
color:#fff;
background:#000;
clip-path: circle(20px at var(--x,-100%) var(--y,-100%));
}
.cursor {
position:fixed;
width:40px;
height:40px;
background:#000;
border-radius:50%;
top:0;
left:0;
transform:translate(-50%,-50%);
z-index:-2;
}<h1 data-text="WORK">WORK</h1>
<span class="cursor"></span>这是另一个使用的想法radial-gradient并且无需复制可以同时处理多个元素的文本：
document.body.onmousemove = function(e) {
document.documentElement.style.setProperty('--x',(e.clientX)+'px');
document.documentElement.style.setProperty('--y',(e.clientY)+'px');
}body {
cursor:none;
}
.mask {
background:
radial-gradient(circle 20px
at var(--x,0) var(--y,0),
#fff 99%,black 100%)
fixed;
background-clip: text;
-webkit-background-clip: text;
color:transparent;
-webkit-text-fill-color: transparent;
}
html::before {
content:"";
position:fixed;
width:40px;
height:40px;
background:#000;
border-radius:50%;
top:var(--y,0);
left:var(--x,0);
transform:translate(-50%,-50%);
z-index:-2;
}<h1 class="mask">WORK</h1>
<p class="mask">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis risus sapien. Maecenas dui orci, blandit et commodo eget, egestas quis odio. Donec eu tortor turpis. Aliquam convallis et nisi ut varius. Proin sapien erat, auctor in efficitur vel, efficitur sit amet justo. In pretium iaculis tempus. Vivamus congue</p>
<p class="mask">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis risus sapien. Maecenas dui orci, blandit et commodo eget, egestas quis odio. Donec eu tortor turpis. Aliquam convallis et nisi ut varius. Proin sapien erat, auctor in efficitur vel, efficitur sit amet justo. In pretium iaculis tempus. Vivamus congue</p>具有类似想法的相关问题：堆叠圆圈会在边界半径上产生黑色条