Question

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

Answer 1

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/