how to stop only the hover pointer event in css

Question

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?

Answer 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