我在这里有一个令人费解的事业.
我正在构建一个用作"火炬/探照灯"的鼠标.如果发生悬停,所有文本(内联元素,按钮,你得到的点)都会从通常的白色反转为黑色,正常的背景是黄色的氛围.
我目前有以下设置:
const _$shadow = $('.b-cursor__shadow');
const _$front = $('.b-cursor__front');
const _$back = $('.b-cursor__back');
$(document).on('mousemove', (e) => {
_$back.css({
left: e.pageX,
top: e.pageY
});
_$front.css({
left: e.pageX,
top: e.pageY
});
_$shadow.css({
left: e.pageX,
top: e.pageY
});
});Run Code Online (Sandbox Code Playgroud)
html,
body {
padding: 0;
margin: 0;
cursor: none;
background: red;
}
.test {
background: darkblue;
}
p {
color: white;
font-family: sans-serif;
font-size: 20px;
max-width: 30rem;
padding: 1rem;
margin: 1rem;
border: 1px solid white;
}
p,
span,
a {
position: relative; …Run Code Online (Sandbox Code Playgroud)