2013-03-09 150 views
2

我有一個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); 
     }); 

希望有人能幫助!

+0

這裏有一個[小提琴](http://jsfiddle.net/ZEjQp/)瞭解你的問題,任何人試圖解決這個問題。 – ryan 2013-03-09 14:08:36

回答

1

我認爲你的錯誤是你正在使用懸停在.arrow divs上,這些使每個可見區域的一半。懸停效果將可見,直到你的鼠標使用div的區域爲止

我改變了一些東西(主要是調整容器大小的CSS,這可以通過多種方式來完成)並將其上傳到jsfiddle(替換我沒有ALT文本的圖像,但它應該用於相同的目的),我也刪除了鼠標移動事件,因爲他們造成了很多錯誤。

我希望我正確

http://jsfiddle.net/fESVm/

.arrow 
    { 
    height: 585px; 
    width: 28px; 
    position: absolute; 
    margin-right:182px; 
    top: 0px; 
    } 
+0

非常感謝您的幫助,我嘗試了您的解決方案,但無效。我不知道你是否真的明白了這個問題?問題是,當鼠標從左到右離開滑塊時,箭頭不會消失。 – user2151536 2013-03-09 19:20:46

+0

我想我連接了weong小提琴試試這個http://jsfiddle.net/fESVm/1/ – 2013-03-10 11:21:17

+0

再次感謝,但你鏈接的代碼與我的很相似,所以仍然有同樣的問題。我不知道我是否理解你想用CSS來做什麼,但我想問題在於JavaScript。 – user2151536 2013-03-10 17:54:52