Javascript JQuery悬停在象限上

我希望创建一个带有悬停效果的JQuery页面。当它悬停在页面的左上象限时，div必须填充文本，页面上的其他三个象限必须填充不同的文本

我不熟悉JQuery，但我确实有某种编程背景，所以我知道如何浏览该语言。我将使用css属性来更改div中的文本，因为它们将是不同的div，显示在同一位置（因此我将更改它们的可见性/显示），还是应该使用JQuery的

.hide（）

和

.show（）

方法

我的主要问题是，如何设置页面，以便当鼠标位于屏幕的左上象限、右上象限、左下象限或右下象限时，JQuery能够启动

---

提前谢谢，任何建议都将不胜感激。

如果您对运行您的网站的浏览器没有限制，我建议您使用

css

而不是

jquery

更新 但是，如果要使用jquery执行此操作，则需要使用

$（'.main menu'）.hover（函数hoverIn（），函数hoverOut（））

。然后，在每个函数参数内，您需要更改样式属性以将显示值更改为

none

（隐藏）或

block

（可见）

---

您可以绑定

mousemove

事件，并将光标位置与窗口宽度和高度进行比较。像这样的

左上角
右上角
左下角
右下角
$（函数（）{
var current；//将在此处保存当前象限
$（文档）.mousemove（函数（ev）{
var left=ev.pageX，top=ev.pageY，//光标坐标
win=$（窗口），
宽度=win.width（），高度=win.height（），水平，垂直，id；
水平=（左<宽度/2）？“左”：“右”；
垂直=（顶部<高度/2）？“顶部”：“底部”；
id=垂直+水平；
如果（id==当前）{//未更改
返回；
}
电流=id；
$（“.message”）.hide（）；//隐藏所有消息
$（“#”+id）.show（）；//仅显示一个具有相应id的。
});
})

您好，谢谢您的回复。我需要页面是干净的，上面没有任何内容，然后当用户移动到一个象限时，所有的页面div都充满了不同的信息。我将如何做到这一点？正如我在编辑的答案中所解释的，您需要使用

$（）。hover（）

查看示例。

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