CODEWITHSUNDEEP
jqueryimagehtmlhoverhide
misticx
misticx

Reputation: 65

Hide div if image is not hover

Ok, I've read all kinds of similar questions but I didn't find an answer for my particular issue. On my site I have a list of images which zooms in on hover and a div in side that image appears showing which type of picture is it. On mouse out the div disappears and the image goes back to it's previous state. All works fine if I slowly hover over the images one by one, but when I hover a few images fairly fast then all divs appear and stay visible, even if the image is not hovered any more. So my question is this: how do I set it so even if I hover images fast, the divs disappear?

$("ul.graphThumbs li").hover(function() {
    $(this).find(".graphInfo").css({"z-index":"9999"}).hide().delay(300).fadeIn(700);
},function(){
    $(".graphInfo").hide();
});

I need something like if ("ul.graphThumbs li") is not hovered then (".graphInfo").hide(). so that (".graphInfo") can be shown only if some of ("ul.graphThumbs li") is hovered. Hope I was clear enough.

Upvotes: 2

Views: 1164

Answers (2)

aziz punjani
aziz punjani

Reputation: 25776

$("ul.graphThumbs li").hover(function() {
    $('.graphInfo').stop(true);  
    $(this).find(".graphInfo").css({"z-index":"9999"}).hide().delay(300).fadeIn(700);
},function(){
    $(".graphInfo").hide();
});

Upvotes: 1

Last Rose Studios
Last Rose Studios

Reputation: 2481

use css

div.about{display:none;}
img:hover + div.about{display:block;}

as a quick example http://jsfiddle.net/lastrose/ssHRd/

if you want to stick to jquery, .stop() and clear the queue before starting another animation. 

$("ul.graphThumbs li").stop(true)

Upvotes: 2

Related Questions