Home/ Questions/Q 4579468
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T20:38:47+00:00

I have elements that are under an element with opacity:0.5 that I want to

  • 0

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" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<title>Sandbox</title> 
<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;} 
</style>
<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'
            })
        .appendTo("#container");

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

 $(".box").click(function(){
      $(this).toggleClass("highlight");
    });
</script>
</head> 
<body> 
  <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> 
  </div> 
</body> 
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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: https://developer.mozilla.org/en/css/pointer-events

    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.

    • 0