【发布时间】：2019-07-07 13:07:22
【问题描述】：
我这里有一个相当令人费解的企业。
我正在制作一个用作“手电筒/探照灯”的鼠标。如果发生悬停，所有文本（内联元素、按钮，你明白了）都会从通常的白色反转为黑色，正常的背景是黄色的氛围。
我目前有以下设置：
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
});
});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;
z-index: 105;
}
.b-cursor__back,
.b-cursor__front,
.b-cursor__shadow {
position: fixed;
width: 8rem;
height: 8rem;
margin-left: -4rem;
margin-top: -4rem;
border-radius: 50%;
}
.b-cursor__shadow {
box-shadow: 0px 0px 10px 10px rgba(231, 232, 192, 1);
}
/* background changes */
.b-cursor__back {
z-index: 104;
background: #18173e;
clip-path: circle(50% at 50% 50%);
}
.b-cursor__front {
z-index: 106;
background: white;
clip-path: circle(50% at 50% 50%);
mix-blend-mode: difference;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pretium pharetra ipsum, at placerat ante maximus vitae. Duis lacus urna, posuere id dapibus in, semper vitae massa. Quisque at egestas nisl. In ex elit, imperdiet eu interdum a, auctor vitae ante. Pellentesque efficitur imperdiet elementum. Integer at nibh gravida nisl sodales ornare ut quis est. Suspendisse sem odio, congue vitae felis at, tincidunt interdum purus. Morbi vitae efficitur est, non congue ante. Proin vel odio et metus sodales lobortis quis ut justo. Phasellus rhoncus eu urna vitae tristique. Suspendisse potenti. Curabitur quis quam lobortis mi laoreet lacinia. Cras non ultrices eros. Nam sed leo et tortor vestibulum cursus nec eu massa. Suspendisse potenti.</p>
<section class="b-cursor">
<div class="b-cursor__shadow"></div>
<div class="b-cursor__back"></div>
<div class="b-cursor__front"></div>
</section>
<div class="test">
<p>ja uh misschien werkt dit wel niet
<p>
</div>(codepen)
这几乎产生了预期的结果，除了 border-radius: 50% 不能正确处理半好的堆叠 div。像素剧！图片澄清：
问题：如何在保留当前对文本的效果的同时，删除由相同大小的这两个元素堆叠产生的黑色边框？
【问题讨论】：
-
我认为您可以通过使用具有径向渐变的单个 SVG 作为光标更轻松地逃脱，然后在 SVG 上应用 mix-blend-mode 以将其与背景上的差异进行合成...
-
与您的问题无关，但滚动确实会脱离聚光灯定位。
-
@AKX 嘿 AKX，我尝试在单个 SVG 中应用此效果，但我使用 z-index 堆栈让内容出现在元素“之间”，因此差异效果正在发挥作用白色文字。
-
看起来与 this question 相关，但不重复
-
codepen.io/anon/pen/OdwoWY 可能只使用插入框阴影（我知道结果不完全相同，但没有黑条）
标签： html css clip-path mix-blend-mode