CODEWITHSUNDEEP
jquery
Patrioticcow
Patrioticcow

Reputation: 27058

jQuery Hover over image problem

I have a script: see fiddle http://jsfiddle.net/patrioticcow/ERTWT/ . When i hover over image a black div slides down. What i want it to be able to click on that div and do something. Right now if i hover over the black div the animation goes crazy :)

<div class="profile-img-edit">Change Profile Picture</div>
<img class="profile-img" src="http://download.exploretalent.com/media014/0000145198/0000145198_PM_1298338078.jpg">

$('.profile-img').hoverIntent(function() {
$('.profile-img-edit').slideDown();
}, function() {
$('.profile-img-edit').slideUp("fast");
});

i can use hover instead of hoverIntent but is not so reliable .

thanks

Upvotes: 0

Views: 624

Answers (2)

Karl Nicoll
Karl Nicoll

Reputation: 16439

The problem that you have is that once you hover over the div, you're not hovering over the image anymore, and so the div disappears, and then once the div disappears, you're hovering over the image again, so the div shows again.. and so on.

Why don't you put both elements inside a single parent div, and set the hover event on that. Like this:

<div class="profile-img-edit">
  <div class="profile-img-edit-menu">Change Profile Picture</div>
  <img class="profile-img" src="http://download.exploretalent.com/media014/0000145198/0000145198_PM_1298338078.jpg">
</div>

$('.profile-img-edit').hoverIntent(function() {
    $('.profile-img-edit-menu').slideDown();
  }, function() {
    $('.profile-img-edit-menu').slideUp("fast");
});

You can find a fiddle demo here: http://jsfiddle.net/wcuDM/3/

Upvotes: 1

teuneboon
teuneboon

Reputation: 4064

The problem is that you need to check if you're either on the div or on the image. You can do that by using this javascript:

var onBlack = false;
var onImage = false;
$('.profile-img').hoverIntent(function() {
    $('.profile-img-edit').slideDown();
    onImage = true;
}, function() {
    onImage = false;
    slideUpCheck();
});

$('.profile-img-edit').hover(function() {
    onBlack = true;
}, function() {
    onBlack = false;
    slideUpCheck();
});

function slideUpCheck() {
    if (!onBlack && !onImage) {
        $('.profile-img-edit').slideUp("fast");
    }
}

You might also want to build in a little timeout, but that's up to you.

Upvotes: 1

Related Questions