JQuery 将鼠标悬停在象限上

JQuery hover over quadrant

本文关键字：悬停 鼠标 JQuery      更新时间：2023-09-26

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

我是JQuery的新手，但我确实有某种编程背景，所以我知道如何浏览语言。我将使用 css 属性来更改div 中的文本，因为它们将是不同的div，显示在同一个位置（所以我将更改它们的可见性/显示），还是我应该使用 JQuery 的 .hide() 和 .show() 方法？

我的主要问题是，如何设置页面，以便在鼠标位于屏幕的左上象限、右上象限、左下象限或右下象限时 JQuery 拾取？

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

您可以在事件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.            
    });
})

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

请参阅此示例

更新但是，如果你想用jquery做到这一点，你需要使用$('.mainMenu').hover(function hoverIn(), function hoverOut())。然后在每个函数参数中，您需要更改样式属性以将显示值更改为none（隐藏）或block（可见）

请参阅此示例

相关文章：