Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
rated 0 times [  179] [ 4]  / answers: 1 / hits: 21671  / 15 Years ago, sat, july 18, 2009, 12:00:00

I have elements that are under an element with opacity:0.5 that I want to be able to click on. How can I click through the topmost element?

Here's an example that demonstrates my problem. Click on the boxes to toggle them on and off. You can edit it on jsbin to try out your solution.

Bonus points if you can have the boxes toggle on hover.

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN>
<html xmlns= xml:lang=en lang=en>
<script src=></script>
<meta http-equiv=Content-type content=text/html; charset=utf-8 />
<style type=text/css media=screen>
body { background-color: #000; }
.box {width: 50px; height: 50px; border: 1px solid white}
.highlight {background-color: yellow;}
<script type=text/javascript>
var dthen = new Date();
$('<div id=past>').css({'height': (dthen.getMinutes()*60)+dthen.getSeconds() +'px'
,'position': 'absolute'
,'width': '200px'
,'top': '0px'
,'background-color': 'grey'
,'opacity': '0.5'

dNow = new Date();
$('#past').css('height', ((dNow.getSeconds()+(dNow.getMilliseconds()/1000))*50)%300 +'px');

<div id=container>
<div class=box style=position:absolute; top: 25px; left: 25px;></div>
<div class=box style=position:absolute; top: 50px; left: 125px;></div>
<div class=box style=position:absolute; top: 100px; left: 25px;></div>
<div class=box style=position:absolute; top: 125px; left: 125px;></div>
<div class=box style=position:absolute; top: 225px; left: 25px;></div>
<div class=box style=position:absolute; top: 185px; left: 125px;></div>

More From » jquery


OK, so there are 2 things I think I would do: (1) a CSS3 answer, that isn't yet widely adopted, and (2) a Javascript backup-plan for the rest. (not sure what to do about users without JS on older browsers that don't support the CSS part). Read on...

First: Use this CSS3 code to make the upper element 'invisible' to mouse-interaction:

pointer-events: none;

This is not yet cross-browser compatible. It only works on SVG & HTML Elements in Gecko & Webkit browsers, but only on SVG elements in Opera, and not at all in IE.

Per the MDN:

The CSS property pointer-events allows
authors to control whether or when an
element may be the target of a mouse
event. This property is used to
specify under which circumstance (if
any) a mouse event should go through
an element and target whatever is
underneath that element instead.

Here's that documentation:

Second: Use some javascript Feature Detection for those browsers that don't yet support this CSS. You'll have to roll your own, similar to Modernizr, since it doesn't test for this yet (to my knowledge). The idea is that you create an element, apply the pointer-events CSS to it, check for it, and if the browser supports the feature, you'll get the expected result, as opposed to something null or undefined; then destroy the element. Anyway, once you have feature detection, you can use jQuery or similar to attach a listener to the uppermost element and assign a click from it to click through to something else. Check out jQuery and it's use of the click() function for more info (not enough reputation to post the link, sry).

If I get time later, I might be able to work up a quick jsFiddle on it. I hope this helps.

[#99100] Tuesday, July 14, 2009, 15 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.

Total Points: 572
Total Questions: 113
Total Answers: 113

Location: Mauritania
Member since Sun, Oct 17, 2021
3 Years ago
nadiaa questions
Thu, Jun 25, 20, 00:00, 4 Years ago
Fri, May 29, 20, 00:00, 4 Years ago
Fri, Dec 20, 19, 00:00, 5 Years ago