3

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?

Finglish
  • 9,692
  • 14
  • 70
  • 114
  • Note that `pointer-event:none` doesn't work in IE10 or less - [caniuse](http://caniuse.com/pointer-events). – Vucko Jun 17 '14 at 07:12
  • 1
    Yes, I am aware. This is a latest browser only concept project. The background effect doesn't need to work on older browsers. Cheers for the heads-up though. – Finglish Jun 17 '14 at 07:47

1 Answers1

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

raskalbass
  • 740
  • 4
  • 21
  • I figured this was probably the case, but you never know what ingenious solutions might turn up when you ask it on stackoverflow :). I think you are probably right, and jquery/javascript is the only way to go. Thanks for the example. – Finglish Jun 17 '14 at 07:50