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");开发者_Python百科
});

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

thanks

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/

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.