如何仅停止css中的悬停指针事件 [英] how to stop only the hover pointer event in css

问题描述

我有一个交互式背景，该背景使用CSS更改悬停时的不透明度.在此文字层(绝对定位)之上.为了使背景甚至在顶部显示文本时也能做出反应，我向包含文本的div中添加了css pointer-event:none .

I have an interactive background that uses css to change opacity on hover. On top of this (absolute positioned) is a text layer. In order to allow for the background to react even with the text on top I have added css pointer-event:none to the div containing text.

这很好用，但是如果我仍然可以保持突出显示文本的功能，那就更好了.

This works well, but it would be better if I could still keep the ability to highlight the text.

有人知道要限制哪些指针事件被抑制吗?

Does anyone know away to limit which pointer-events are suppressed?

推荐答案

实际上，您无法做自己想做的事情.如果禁用指针事件，则无法选择文本.但是您可以通过一些jquery魔术来实现此功能.

Actually you can't do what you want. If you disable pointer-event, text can't be selected. But you can do this functional by some jquery magic.

首先，您将背景悬停效果放到某个类中:

first you put background hover effects into some class:

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

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

then assign it to hover effect:

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

并将您的悬停事件翻译成您的背景:

and translate hover event from you block into you background:

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

看看小提琴，您就会了解

So look into fiddle and you'll understand

示例

这篇关于如何仅停止css中的悬停指针事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！