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>
