JQuery懸停在象限上

Question

我正在創建一個懸停播放效果的JQuery頁面。當它懸停在頁面的左上角時，div必須填充文本，並且頁面上的其他三個象限使用不同的文本。

我是JQuery的新手，但我確實有某種編程背景，所以我知道如何瀏覽該語言。我打算使用css屬性來更改div中的文本，因爲它們將是不同的div，顯示在同一個位置（所以我將改變它們的可見性/顯示），還是應該使用JQuery的.hide()和.show()方法？

我的主要問題是，如何設置頁面以便JQuery在鼠標位於屏幕的左上象限，右上象限，左下象限或右下象限時拾取？

在此先感謝，任何意見將不勝感激。

Answer 1

您可以在mousemove綁定事件，並比較光標位置與窗寬高度。像這樣http://jsfiddle.net/tarabyte/DUJQ4

<div id="topleft" class="message">Top Left</div> 
<div id="topright" class="message">Top Right</div> 
<div id="bottomleft" class="message">Bottom Left</div> 
<div id="bottomright" class="message">Bottom Right</div> 

$(function(){ 
    var current; //will save current quadrant here 
    $(document).mousemove(function(ev){ 
     var left = ev.pageX, top = ev.pageY, //cursor coordinats 
      win = $(window), 
      width = win.width(), height = win.height(), horizontal, vertical, id; 

     horizontal = (left < width/2) ? "left": "right"; 
     vertical = (top < height/2) ? "top": "bottom"; 
     id = vertical + horizontal; 
     if(id == current) { //not changed 
      return; 
     } 
     current = id; 
     $(".message").hide(); //hide all messages 
     $("#" + id).show(); //show only one with corrent id.    
    }); 
}) 

Answer 2

如果你沒有一個關於至極瀏覽器限制，將運行自己的網站，我建議你使用css代替jquery

see this example

UPDATE 但是，如果你想做到這一點jQuery你需要使用$('.mainMenu').hover(function hoverIn(), function hoverOut())。然後，每個函數參數裏面你需要改變的樣式屬性的顯示值更改爲none（隱伏）或block（可見光）

See this example