7

I have four div elements and on mouseover the selected div will get zoomed. But i need to get the mouseover event of the remaining three underlayed divs even when the other one is overlayed, so that i can make the earlier one out of zoom and the currently hovered one zoomed.

Please consider my fiddle: http://jsfiddle.net/aniprasanth/7jFGH/1/

HTML code goes like this

<div id="main_window">
                <div class="multi-window">
                    <div class="zoomer tile">
                        <img src="images/img1.jpg" width="207" height="138" />
                    </div>
                 </div>
              <div class="multi-window">
                    <div class="zoomer tile">
                        <img src="images/img2.jpg" width="207" height="138" />
                    </div>
                 </div>
             <div class="multi-window">
                    <div class="zoomer tile">
                        <img src="images/img3.jpg" width="207" height="138" />
                    </div>
                 </div>
              <div class="multi-window">
                    <div class="zoomer tile">
                        <img src="images/img4.jpg" width="207" height="138" />
                    </div>
                 </div>
            </div>

CSS Goes like this:

#main_right #main_window {
height: 320px;
width: 460px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
position: relative;

}
.multi-window {
height: 150px;
width: 218px;
float: left;
margin-right: 11px;
margin-bottom: 10px;
cursor: pointer;
}
.zoomer {
height: 140px;
width: 208px;
cursor:pointer;
}
.zoom {
height: 301px;
width: 450px;
float:none;
margin:0px;
cursor:pointer;
position:absolute;
left:0;
top:0;
background-color:#FFF;
}
.multi-window img {
width:100% !important;
height:100% !important;
}

and finally the script:

$('.zoomer').on('mouseenter',function(e){
        $(this).addClass('zoom').removeClass('zoomer');
        $('.zoom img').css({
            'width':'100%',
            'height':'100%'
            });

            $(this).bind('mouseleave click', function(){

                $(this).removeClass('zoom').addClass('zoomer');
                $('.zoomer').removeClass('zoomer'); 


                });
        });
Prasanth K C
  • 7,073
  • 5
  • 39
  • 62
  • 1
    Have a play with `z-index`, [example](http://jsfiddle.net/7jFGH/3/) – Morpheus Feb 12 '13 at 11:41
  • Although not easily possible, this might help you http://stackoverflow.com/questions/3015422/forwarding-mouse-events-through-layers-divs – Mandeep Jain Feb 12 '13 at 12:00
  • 1
    Isn't this a bit counter-intuitive? When you hover over an image and it appears on top of other images, you don't really expect for the image to then change when you move your mouse within that new image. It may be better to display the image as a tooltip (of sorts) in relation to the cursor position, so that when you hover over an image it appears relative to the cursor - and ultimately when you hover off of an image it's no longer displayed. – James Donnelly Feb 12 '13 at 12:59

1 Answers1

17

Use this CSS property for the overlay Div.

pointer-events: none

This will disable all click events on that div and will pass all the click events to the layer beneath it.

Anubhav Gupta
  • 1,176
  • 11
  • 12