Ka.I.Z Ka.I.Z - 1 year ago 44
CSS Question

Overlapping DIV Elements and onclick

i'm about to write my own interactive Tutorial with HTML, Javascript and css. Now i had the idea to create an DIV-element that represents an glowing rectangle to mark specific areas. The problem is when I change the position of the glow-rectangle, to highlight an element that is clickable, the glow rectangle is overlapping the clickable element. So the clickable element is no longer clickable. Is there a way to "disable" the glow-rectangle so it's visible but no longer blocking the underlaying element?

Here is my code:

<div id="hauptteil">
<div id="block" onclick="step2();" style="cursor: pointer">

</div>

<div id="glowDiv">
<div id="glow" class="glow"><img src="images/transBlock.png"/></div>
</div>
</div>


Here is the css code:

#glowDiv {
width: 200px;
height: 100px;
position: absolute;
top: 200px;
left: 200px;
}

.glow {
margin: auto;
width: 147px;
height: 90px;

-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;

-webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
-moz-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
}

#block {
width: 50px;
height: 50px;
background: red;
}


To visualize my problem. On my page I have a DIV-Element that is visible as a red block. When I start my tutorial, I change the position of my glow-DIV to cover the red block. So it seems that the red block is glowing.

Answer Source

Back in 2013 you had to use a script to solve this problem, but nowadays, pointer-events is widely supported. Use it!


Normally you would just user the pointer-events css property. Guess what? IE doesn't support it... With a little help from our friend jquery we can emulate this however!

My approach is to capture the click event in the glow (the absolute positioned div) and check if there are any other elements overlapping the x-y coordinate of the mouse click.

Warning: jQuery ahead!

First just capture the click event:

$('.glow').on('click', function(e) {  // our trick here });

Then determine the coordinates of the mouse cursor. Quite easy as jQuery helps us out by giving the coordinates in the event object

var cursorX = e.pageX;
var cursorY = e.pageY;

Now we need to traverse all dom elements that are possibly sitting below our glow div that we want to receive the click event as well.

$('.class-possibly-below').each(function(index, element) { // our calculations here });

If we can get the position relative to the window and it's width and height we can calculate if our cursor was over it while clicking. In that case our cursorX and cursorY values would be in between the left-position and left-position + width (and top- and height respectively) of our DOM element we're traversing. Yet again jQuery helps a bit:

var offset = $(element).offset();
xRangeMin = offset.left;
xRangeMax = offset.left + $(element).outerWidth();

We use offset() instead of position() because the latter returns the position relative to it's parent. And we use the outerWidth() and outerHeight() instead of width() and height() respectively because the former also includes padding and border.

Now check if the x and y coordinates are in between the range-min and range-max. If so, trigger the click event on this element.

if(cursorX >= xRangeMin && cursorX <= xRangeMax && ...) {
    $(element).trigger('click');
}

You want some action? Check out this fiddle!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download