jQuery將鼠標懸停在圖像上的問題

Question

我有一個腳本：請參閱小提琴http://jsfiddle.net/patrioticcow/ERTWT/。 當我將鼠標懸停在圖像上時，黑色的div滑落。我希望它能夠點擊該div並執行某些操作。現在，如果我將鼠標懸停在黑色格動畫發瘋:)

<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"); 
}); 

我可以使用hover代替hoverIntent但並不十分可靠。

感謝

Answer 1

，你必須是，一旦你將鼠標懸停在DIV，你不懸停在圖像了，所以這樣的股利消失，那麼一旦DIV消失，你徘徊的問題再次在圖像上，所以div再次顯示...等等。

爲什麼你不把這兩個元素放在一個父div中，並設置懸停事件。就像這樣：

<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"); 
}); 

你可以在這裏找到一個小提琴演示：http://jsfiddle.net/wcuDM/3/

Answer 2

的問題是，你需要檢查，如果你無論是在股利或圖像上。你可以通過使用這個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"); 
    } 
} 

你可能也想建立在一個小超時，但這取決於你。