Question

想在jquery中使用for循环，以便：

“对于每个hover_link：在hover hover_link旁边显示隐藏的div。”

当前的jquery不会显示隐藏的div，更不用说将隐藏的div放在hovered链接旁边，并且无法弄清楚如何为多个hover_links循环它。

jquery的：

$(document).ready(function() {
    $(".hover_link").mousemove(function(e) {
        $("#box1").show();
        $(".box").css({
            top: ($(".hover_link").offset().top() + 10) + "px",
            left: ($(".hover_link").offset().left() + 10) + "px"
        });
    });
    $(".hover_link").mouseout(function(e) {
        $("#box1").hide();
    });
});

小提琴：http://jsfiddle.net/3kWq7/1/

非常感谢任何可以提供帮助的人

Answer 1

将mousemove替换为mouseenter

理想情况下，您想使用（http://api.jquery.com/on/）

为了使其更具动态性，您可以将rel属性添加到可以包含要为该特定区域显示的框的id的区域。那么你只需要抓住rel属性并显示相应的框

更新

我在区域标记上添加了rel，并使用.on（）编写了鼠标处理程序。我发表了评论，所以我希望你能理解http://jsfiddle.net/3kWq7/3/

的内容

Answer 2

原来如此！最后问题是我在页面上居中的固定宽度div内的div上运行了jquery。

为了解决这个问题，我基本上检测到了html文档宽度，减去了div的固定宽度，然后将余数除以2，得到了我需要偏移鼠标计算的左边距以获得隐藏无论窗口大小是什么，div都会在鼠标旁边弹出。

网站的标题也是一个固定的大小，所以我从鼠标位置减去它的高度，使隐藏到div以正确定位在另一个轴上。

for循环是没有必要的 - 所以为了让它弹出不同的隐藏div，取决于悬停的链接区域，我使用 rel =“boxID”实现@Huangism的建议属性。 （谢谢@Hunagism！）

最后的小提琴：http://jsfiddle.net/3kWq7/10/

最终结果：http://jsfiddle.net/3kWq7/10/embedded/result/

最终的jquery：

$(document).ready(function(){
    $(".hover_link").mousemove(function(e){         
        $($(this).attr('rel')).show();
        var padding = parseInt(jQuery("#page").css("margin-right"));
        var margin = $(document).width() - 900;
        var marginleft = margin / 2;        
            $(".box").css({             
            top: (e.pageY - 200) + "px",             
            left: (e.pageX - marginleft + 10) + "px"        
        });    
    });     
    $(".hover_link").mouseout(function(e){         
        $($(this).attr('rel')).hide();   
    });
});

jquery for循环：为每个悬停链接显示与悬停链接相邻的隐藏div

2 个答案: