CODEWITHSUNDEEP
javascriptjquery
Ben
Ben

Reputation: 1535

How to place a mouse under a div (with jQuery)?

Ok so let me explain. Lets say there is a small image and when you hover over it, there will be a new and much larger image (an enlarge version of the image). Thats easy, but wait! I want the larger image to be right on top of the smaller image and when you hover out of the smaller image, the div goes away. The problem is that when you display the larger image on top of the smaller image, the mouse is hovering over the larger image and not the smaller image. I want to make it so that the mouse stays hovering on the small image while having the larger image on top if it. And when you hover out of the smaller image the larger image disappears. The key is having the larger image on top of the smaller one (covering it up), but having the mouse under the larger image. Cant figure this out! Thanks guys

Upvotes: 1

Views: 370

Answers (3)

gilly3
gilly3

Reputation: 91557

No, the mouse is always on top. But, you can accomplish the functionality you want - to hide the larger image when the mouse leaves the smaller image. There's more than one way to do it, for sure. Here's the approach I'd take.

HTML:

<div class="imgHover"></div>   <!-- This div is the element that is hovered -->
<img class="large" src="largerImg.jpg" />
<img class="small" src="smallerImg.jpg" />

CSS:

.small, .imgHover
{
    height: 55px;  /* Set the div's size to match the smaller image */
    width: 80px;
}
.imgHover, .large
{
    position: absolute;
}
.large
{
    display: none;
    z-index: 2;
}
.imgHover:hover + .large  /* this bit is the important part */
{
    display: block;
}
.imgHover
{
    z-index: 3;
}

If you want to do it with JavaScript instead of pure CSS, that's ok. Set it up with the same css, but use div.imgHover to attach your mouse events.

Upvotes: 1

austinbv
austinbv

Reputation: 9491

Sounds like your problem is because with the .hover() because you have the new div opening over the old one it causes the .hover() to fire the mouseOut function. The best solution is to add to the .hover() so the mouseEnter also includes the larger image that "grows" out of the smaller image.

something like

$("#small_image, #large_image").hover(function (){...},function() {...});

Upvotes: 0

Murali VP
Murali VP

Reputation: 6427

The solution would be to handle hover on the larger image but in the handler have the larger image go away when the pointer's x and y positions leave the boundaries of the smaller image.

Upvotes: 0

Related Questions