0

I have a divBelow that has various anchors... I have a divOver with a higher z-index and transparency. However, because I placed div over div, all those anchors from the div below are not clickable anymore. I tried with other solutions, such as assigning divBelow pseudo :after transparency:

#divBelow:after {
 content:'';
 position: absolute;
 top: 0; left: 0; width: 100%; height: 100%;
 background: rgba(255, 255, 255, 0.5);
}

but it didn't show any transparency, so I used a divOver with higher z-index, but functionality is gone. I tried assigning divOver this:

 $('#divOver').click(function(e) {
    e.bubbles = true;
 });

but it also didn't work.

What is the simplest solution? Thanks

Dalibor
  • 1,430
  • 18
  • 42
  • Can you show us a rough mock-up of the situation on a [jsfiddle](www.jsfiddle.net)? Jonas' answer is probably best but depending on desired effect there may be workarounds… – Barney Apr 09 '14 at 08:50
  • Really this depends on how much browser support you need. If you want this to work in older browsers, you'll need to use coordinates to find the element below and run its click event. See [**this question**](http://stackoverflow.com/questions/1737480/passing-mouse-clicks-through-an-overlaying-element-div) for more info. – Liftoff Apr 09 '14 at 08:56

1 Answers1

1

Try with:

.over-element {
    pointer-events: none;
}

in your CSS, this is the easy solution, but sadly it has bad browser support http://caniuse.com/#search=pointer-events .

But I remember coming across a fix for ie, I think it was this one: http://www.vinylfox.com/forwarding-mouse-events-through-layers/

I'm afraid making that work consistently across browser is trickier than you originally thought

Jonas Grumann
  • 10,438
  • 2
  • 22
  • 40
  • Thank you! It's awsome solution; however, is there alternative solution that I wouldn't even had a divOver? Please – Dalibor Apr 09 '14 at 09:02
  • It's impossible for us to say without knowing what you're trying to achieve. If we could see a layout or mockup or a demo we might be able to help further. – Jonas Grumann Apr 09 '14 at 09:12
  • Sorry, here it is, it's about the fader of the images on the right: http://www.studioimago.hr/kabinet2/_tmp.htm I want to make that div semi-transparent without having to place another div over it. – Dalibor Apr 09 '14 at 09:46
  • You have a couple of scripts that change of those elements between 0 and 1, Just find all the "opacity: 1" in your code and change them to opacity: .5. This should fix it. I feel the need to tell you that an image fader like that can easily be achieved with css alone – Jonas Grumann Apr 09 '14 at 10:19
  • Thanks! However, this is version when opacity is semi-transparent, but in the most probable version I would have black semi-transparent, so I couldn't just apply background: rgba(0, 0, 0, 0.5); because it wouldn't be visible, so I needed to apply that background to the div above. Am I missing something? Thanks. – Dalibor Apr 09 '14 at 10:50
  • That's only true if you don't place a white div underneath all those images, or you could event set background: white to the container itself – Jonas Grumann Apr 09 '14 at 11:50
  • Thank you, but I've tried to set background:#fff to all of them including container (divCntRightHolder, divCntRight, divFader1) but still I could see the big slider from down below, that's why I had to put a blank white div below fader – Dalibor Apr 10 '14 at 11:16
  • That's because the images are absolutely positioned, and the container collapses, you need to set width: 182px; height: 194px; to #divCntRight, #divFader1, and #divFader1 a – Jonas Grumann Apr 10 '14 at 12:05
  • Oh, my bad, I forgot! Thank you very much!! – Dalibor Apr 10 '14 at 13:39