1

想要一个 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/

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

4

2 回答 2

1

用 mouseenter 替换 mousemove

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

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

更新

我在 area 标签上的 html 中添加了 rel，并使用 .on() 编写了您的鼠标处理程序。我发表了评论，希望您了解发生了什么http://jsfiddle.net/3kWq7/3/

于 2012-06-26T15:38:00.997 回答
0

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

为了解决这个问题，我基本上检测到了 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();   
    });
});
于 2012-06-27T10:55:26.367 回答