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 eve

Solution 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