html - 如何仅停止CSS中的悬停指针事件

Question

我有一个交互式背景，它使用 css 改变悬停时的不透明度。在此之上(绝对定位)是一个文本层。为了让背景即使对顶部的文本也能使用react，我在包含文本的 div 中添加了 css pointer-event:none。

这很好用，但如果我还能保留突出显示文本的功能，那就更好了。

有谁知道限制哪些指针事件被抑制？

Answer 1

其实你不能为所欲为。如果禁用指针事件，则无法选择文本。但是您可以通过一些 jquery 魔术来实现此功能。

首先将背景悬停效果放入某个类中:

.hov{background: black !important;} //just example

然后将其分配给悬停效果:

$('#wrap').hover(function() {
    $('#wrap').toggleClass("hov");
});

并将你 block 中的悬停事件翻译成你的背景:

$('#block').hover(function(e) {
    $('#wrap').trigger(e.type);
});

所以看看fiddle你就明白了

EXAMPLE