How to MouseOver behind an object?

Question

I'm trying to mouseover an image which is behind an another image.

Is there any way to render the front image like it is not there, so I can mouseover the other image behind it?

Example can be seen here: I can't mouseover the characters which are behind the logo boundingbox.

Answer 1

You can set the CSS property pointer-events: none on the obstructing object... but be aware that pointer events are all or nothing; mouseovers and hovers will pass right through, but so will clicks.

Here is a description of the value, from the Mozilla Developer's Network:

none: The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

I've put together a little example. In this example, I'm using onmouseover and onmouseout, since that's what you use on your website, but you could just as easily use the CSS :hover pseudo-selector. Here's a jsfiddle version of the example, and the stack snippet is below.

.hoverable {
  width: 100px;
  height: 100px;
  background-color: blue;
}

.obscuring {
  /* this first line is the important part */
  pointer-events: none;
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: red;
  opacity: 0.5;
}

<div class="hoverable" onmouseover="this.style.backgroundColor = 'green'" onmouseout="this.style.backgroundColor = 'blue'"> </div>
<div class="obscuring"> </div>

Answer 2

You can create some invisible divs on top of the whole thing and put the hover behaviour on them. Then control the characters position with the position of the invisible divs.

Hope it makes sense.