相关疑难解决方法(0)

我想用自定义的黑色光标悬停它时反转黑色文本.这个GIF证明了这个效果:

无法用头脑来解决这个问题,使用CSS和JS.我想有些混合混合模式,剪切蒙版,伪元素和滤镜.

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

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

我已经在Codepen上安装了一个游乐场,但是还没有找到解决方案.

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

导致“错误”的 CSS：

div {
    width: 100px;
    height: 100px;
    background-color: transparent;
    box-shadow: 0 0 15px 20px #000 inset;
    border: 100px solid #000 ;
    border-radius: 150px;
}

看起来插入框阴影和周围边框之间有某种 1px 的透明边框。

看看这个活生生的例子，我可以用最新版本的 Chrome、Firefox 和 IE 重现这种渲染怪异的情况。（因此不依赖于渲染引擎）

并且它不会发生在较低的边界半径（换句话说，当形状不是圆形时不会发生）

编辑：

我没有找到让这个东西消失的方法，但是使用低不透明度使它几乎不可见。我将使用该技术（并让问题保持开放），直到出现真正的解决方案。

我在我正在构建的新网站上使用径向渐变，但颜色在桌面上的 Safari 中呈现不同（更暗）。有没有更好的跨浏览器语法可供使用？

我尝试了不同的前缀，但这并没有解决问题。我正在使用的代码如下。

.item1 {
  background: -webkit-radial-gradient( bottom left, farthest-side, rgba(218, 218, 216, 0.5), transparent), -webkit-radial-gradient( bottom right, farthest-corner, rgba(253, 253, 253, 0.5), transparent 300px);
  background: -o-radial-gradient( bottom left, farthest-side, rgba(218, 218, 216, 0.5), transparent), -o-radial-gradient( bottom right, farthest-corner, rgba(253, 253, 253, 0.5), transparent 300px);
  background: radial-gradient( farthest-side at bottom left, rgba(218, 218, 216, 0.5), transparent), radial-gradient( farthest-corner at bottom right, rgba(253, 253, 253, 0.5), transparent 300px);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

当前在 Chrome 和 Firefox 中看到的正确输出： https: …