1

我正在开发一个悬停下拉面板，其中包含列出的 Google+、Facebook、Youtube 和 Twitter 社交小部件，供访问者在不关闭面板的情况下“单击”每个小部件。

我从简单的 jquery 下拉菜单开始，将其简化为单个 ul li div，因此当鼠标悬停在单个菜单项（Socialize）上时，它会显示一个包含所有 4 个社交小部件的 div。到目前为止，一切都很好。只要您将鼠标悬停在单个菜单项或包含 4 个社交小部件的 div 上，它就会保持可见，并且移出 div 会使其隐藏。

我遇到的问题是 Google+ 小部件有一个关注按钮，在鼠标悬停时，它会打开它自己的小下拉菜单来选择您想要选择的圈子。当这个 Google+ 下拉菜单出现时，父 div 会因为缺少更好的术语而失去“焦点”，并且包含的​​ div 会隐藏。我试图深入了解 Google+ 小部件并手动挑选一些 div 添加到我的简单 jquery 下拉脚本中，但没有成功。

有谁知道当 Google+ 小部件“关注”按钮悬停时如何保持包含 div 的打开？

这是我的简单jquery。

$(function(){
    $('ul.dropdown li').hover(function(){
        $(this).addClass("hover");
        $('ul:first',this).css('left', '-200px');
        //$('ul:first',this).css('display', 'block');

    }, function(){
        $(this).removeClass("hover");
        $('ul:first',this).css('left', '-2000px');
        //$('ul:first',this).css('display', 'none');
    });
});

被注释掉的两行是原始的 Hide/Show，但由于小部件无法在隐藏的 div 中正确加载的问题，我选择使其保持可见并简单地将其从视口一侧移开。整个单独的问题。我只需要解决导致父 DIV 消失的 Google+ Follow Button mouseover。

编辑：这是进一步澄清的网站。 http://www.lawncaremarketingexpert.com/

4

1 回答 1

0

您可以在 Google+ div 的鼠标悬停事件中使用“event.stopPropagation()”。像这样的东西：

$('<Google+ div selector>').mouseover(function(e){
 e.stopPropagation();
});

解决方法：

$('<Google+ div selector>').mouseover(function(e){
     jQuery('<parent dropdown panel selector>').show();
  });
于 2013-09-05T05:55:52.377 回答