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

看這個例子

更新但如果要使用jquery進行此操作，則需要使用$('.mainMenu').hover(function hoverIn(), function hoverOut()) 。 然后，需要在每個函數參數內更改樣式屬性，以將顯示值更改為none （隱藏）或block （可見）

看這個例子