how to stop only the hover pointer event in css

问题

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?

回答1:

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

EXAMPLE

来源：https://stackoverflow.com/questions/24257633/how-to-stop-only-the-hover-pointer-event-in-css