jquery for loop：对于每个悬停的链接，在悬停的链接旁边显示相关的隐藏 div答案

【问题标题】：jquery for loop: for each hovered link show related hidden div next to hovered linkjquery for loop：对于每个悬停的链接，在悬停的链接旁边显示相关的隐藏 div
【发布时间】：2012-06-26 15:30:54
【问题描述】：

希望在 jquery 中有一个 for 循环，以便：

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

当前的 jquery 不显示隐藏的 div，更不用说将隐藏的 div 放置在悬停的链接旁边，并且无法弄清楚如何为多个 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/

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

【问题讨论】：

尝试用mouseenter替换mousemove，如果你使用jquery 1.7.2，也应该查看api.jquery.com/on

标签： jquery html css for-loop offset

【解决方案1】：

将 mousemove 替换为 mouseenter

理想情况下，您想在 (http://api.jquery.com/on/) 上使用

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

更新

我在区域标签上的 html 中添加了 rel，并使用 .on() 编写了您的鼠标处理程序。我把 cmets 放进去了，所以希望你明白发生了什么http://jsfiddle.net/3kWq7/3/

【讨论】：

感谢 Huangism，使用 rel 属性你有我如何编写 for 循环的示例吗？也许在 Fiddle 上给我看：jsfiddle.net/3kWq7/1 我还在学习 jquery！非常感谢您的帮助...
@bigtoothmedia 我已经用 cmets 的小提琴更新了我的答案，学习愉快
感谢@Huangism - 这会显示隐藏的 div（耶！）但它会将其定位在地图下方，而我希望它靠近鼠标...我可以让它工作到一点我的网站，但它计算相对于父 div 的鼠标，所以我尝试使用 div ID 从鼠标坐标中删除该 div 的偏移量，但它根本不显示隐藏的 div ...看看@987654323 @最新代码在这里：jsfiddle.net/3kWq7/4

【解决方案2】：

所以！最后的问题是我让 jquery 在页面上居中的固定宽度 div 内的 div 上运行。

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

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

事实证明，for 循环不是必需的 - 所以为了让它根据悬停的链接区域弹出不同的隐藏 div，我使用 rel="boxID" 实现了 @Huangism 的建议 em> 属性。 （感谢@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();   
    });
});

【讨论】：