jQuery画像にカーソルを合わせる問題

Question

私はスクリプトを持っています：fiddle http://jsfiddle.net/patrioticcow/ERTWT/を参照してください。 画像の上にカーソルを置くと、黒いdivが下にスライドします。そのdivをクリックして何かできるようにしたいのですが。今、私は黒のdivの上にマウスを置く場合はアニメーションが狂う:)私が代わりにhoverIntentのhoverを使用しますが、それほど信頼性がないことができ

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

。

おかげ

Answer 1

あなたは持っている問題は、あなたがdiv要素の上にマウスを置くと、あなたはもう、画像の上にホバリングしていないということです、そしてそのdiv要素が消え、その後のdivが消えたら、あなたがホバリングしています画像上に再び表示されるので、divが再び表示されます。

なぜ、両方の要素を1つの親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

問題は、あなたがdivの上または画像上のいずれかにしているかどうかを確認する必要があるということです。

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

あなたはまた少しタイムアウトに構築することがありますが、それはあなた次第です：あなたはこのJavaScriptを使用してそれを行うことができます。