Question

I’ve got situation:

<div id="main">
  <div id="a"></div>
  <div id="b"></div>
</div>

On my web page, element B is under A. How can I bind click to only those A element which are above B elements? For example:

$('#main, #main > #b').click(function(){
  //something
});

EDIT2: this code is OK when I click on parent div, or “b” element but when I click on “A” element which is above nothing happens.

in general I want to click only on B element, but when A element is above B I want to fire up event to.
thanks!

EDIT: unfortunately I cannot modify HTML code.

Answer 1

Check this out, as i left a comment in your question, i made a script to show you what i’ve mean by using jquery library for example, HERE IS THE LINK

HTML:

<div id="main">
  <div id="a">A</div>
  <div id="b">B</div>
</div>

CSS:

#main div{width:100px;height:100px;display:block;position:absolute;margin:10px;top:0;left:0;line-height:100px;text-align:center;}
#main #a{background:#DDD;top:5px;left:5px;}
#main #b{background:#999;color:#FFF;}

jquery script:

//onHover B do the next...
$('#b').hover(function(){

  // actual B element move below
  $(this).css('zIndex', -1);

});
//onHover A do the next...
$('#a').hover(function(){
  // nothing on hover
},function(){
  // but onHoverOut do next...
  $('#b').css('zIndex', 'auto');
});