我有一個3圖像滑塊的頁面。如果您懸停滑塊的左側部分,則會出現一個顯示向左方向的箭頭並替換鼠標。如果您將鼠標懸停在滑塊右側,則會出現一個顯示正確方向的箭頭並替換鼠標。而且,這些箭頭出現和消失漸隱(這就是爲什麼我使用jQuery而不是css遊標屬性)。懸停fadeOut jQuery問題
我做了所有這些,但問題是,當鼠標只從左到右退出滑塊底部時,箭頭不會消失,直到您將鼠標移動到另一個方向。
因此,這裏是我的代碼,第一個HTML部分:
<div id="arrow-prev" class="arrow">
<img id="cursorimg_prev" src="style/arrow-left.png" />
</div>
<div id="arrow-next" class="arrow">
<img id="cursorimg_next" src="style/arrow-right.png" />
</div>
的CSS:
.arrow
{
height: 585px;
width: 750px;
position: absolute;
top: 0px;
}
#arrow-prev
{
left: 0px;
cursor: none;
width:50%;
}
#arrow-next
{
right: 0px;
cursor:none;
width:50%;
}
#cursorimg_prev,
#cursorimg_next
{
position: absolute;
display: none;
z-index: 99;
}
而jQuery的部分:
$('#arrow-prev').mousemove(function(event) {
var position = $('.slider_conteneur').position();
var x = event.pageX - position.left - 0;
var y = event.pageY - position.top - 0;
$('#cursorimg_prev').css({ top: y+"px", left: x+"px" });
});
$('#arrow-prev').hover(function() {
$('#cursorimg_prev').stop().fadeIn(100);
}, function(){
$('#cursorimg_prev').stop().fadeOut(100);
});
$('#arrow-next').mousemove(function(event) {
var position = $('.slider_conteneur').position();
var position2 = $('#arrow-next').position();
var x = event.pageX - position.left - position2.left;
var y = event.pageY - position.top - position2.top;
$('#cursorimg_next').css({ top: y+"px", left: x+"px" });
});
$('#arrow-next').hover(function() {
$('#cursorimg_next').stop().fadeIn(100);
}, function(){
$('#cursorimg_next').stop().fadeOut(100);
});
希望有人能幫助!
這裏有一個[小提琴](http://jsfiddle.net/ZEjQp/)瞭解你的問題,任何人試圖解決這個問題。 – ryan 2013-03-09 14:08:36