如何在css中仅停止悬停指针事件

Question

我有一个交互式背景，使用css来改变悬停时的不透明度。最重要的是（绝对定位）是文本层。为了让背景甚至与顶部的文本做出反应，我在包含文本的div中添加了css pointer-event：none 。

这种方法效果很好，但如果我仍能保持突出显示文本的能力会更好。

有没有人知道要限制哪些指针事件被抑制？

Answer 1

实际上你不能做你想做的事。如果禁用指针事件，则无法选择文本。但你可以通过一些jquery魔法来实现这一功能。

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

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

然后将其指定为悬停效果：

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

将你的悬停事件转换为你的背景：

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

所以看看小提琴，你会理解

EXAMPLE