将鼠标悬停在列表项目上时会出现div？

当用户将鼠标悬停在列表项上时，我遇到了很多麻烦，使得div在我的网站上显示。基本上，我有一个链接列表。当用户在其中一个悬停时，我需要两个div出现 - 一个是所有悬停通用的背景框，另一个是充满与该列表项目相关的内容。当鼠标离开“row2”区域时（所有内容都包含在内），我还需要所有div消失。下面的脚本是半工作的，但是，如果用户将鼠标从一个列表项快速移动到下一个列表项，项目“叠加”并且不会正确消失。将鼠标悬停在列表项目上时会出现div？

这里你可以看到这个问题：

这里是jQuery的我目前有：

$(document).ready(function() 
{ 
    $(".subjectarea_box,.subjectarea_box > div").hide();  

    $(".subjectarea_topics li[class!='arts-culture-recreation']").mouseover(function() 
    { 
     $("div.arts-culture-recreation").hide(); 
    }); 
    $("li.arts-culture-recreation").mouseover(function() 
    { 
     $("div.arts-culture-recreation,div.subjectarea_box").fadeIn(); 
    }); 
    $("div.row2").mouseleave(function() { 
     $("div.arts-culture-recreation,div.subjectarea_box,.subjectarea_box > div").hide(); 
    }); 

    $(".subjectarea_topics li[class!='civic-vitality']").mouseover(function() { 
     $("div.civic-vitality").hide(); 
    }); 
    $("li.civic-vitality").mouseover(function() { 
     $("div.civic-vitality,div.subjectarea_box").fadeIn(); 
    }); 
    $("div.row2").mouseleave(function() { 
     $("div.civic-vitality,div.subjectarea_box,.subjectarea_box > div").hide(); 
    }); 

    $(".subjectarea_topics li[class!='demographics']").mouseover(function() { 
     $("div.demographics").hide(); 
    }); 
    $("li.demographics").mouseover(function() { 
     $("div.demographics,div.subjectarea_box").fadeIn(); 
    }); 
    $("div.row2").mouseleave(function() { 
     $("div.demographics,div.subjectarea_box,.subjectarea_box > div").hide(); 
    }); 

    $(".subjectarea_topics li[class!='economy']").mouseover(function() { 
     $("div.economy").hide(); 
    }); 
    $("li.economy").mouseover(function() { 
     $("div.economy,div.subjectarea_box").fadeIn(); 
    }); 
    $("div.row2").mouseleave(function() { 
     $("div.economy,div.subjectarea_box,.subjectarea_box > div").hide(); 
    }); 

    $(".subjectarea_topics li[class!='education']").mouseover(function() { 
     $("div.education").hide(); 
    }); 
    $("li.education").mouseover(function() { 
     $("div.education,div.subjectarea_box").fadeIn(); 
    }); 
    $("div.row2").mouseleave(function() { 
     $("div.education,div.subjectarea_box,.subjectarea_box > div").hide(); 
    }); 

    $(".subjectarea_topics li[class!='environment-transportation']").mouseover(function() 
    { 
     $("div.environment-transportation").hide(); 
    }); 
    $("li.environment-transportation").mouseover(function() { 
     $("div.environment-transportation,div.subjectarea_box").fadeIn(); 
    }); 
    $("div.row2").mouseleave(function() { 
     $("div.environment-transportation,div.subjectarea_box,.subjectarea_box > div").hide(); 
    }); 

    $(".subjectarea_topics li[class!='financial-self-sufficiency']").mouseover(function() { 
     $("div.financial-self-sufficiency").hide(); 
    }); 
    $("li.financial-self-sufficiency").mouseover(function() { 
     $("div.financial-self-sufficiency,div.subjectarea_box").fadeIn(); 
    }); 
    $("div.row2").mouseleave(function() { 
     $("div.financial-self-sufficiency,div.subjectarea_box,.subjectarea_box > div").hide(); 
    }); 

    $(".subjectarea_topics li[class!='health']").mouseover(function() { 
     $("div.health").hide(); 
    }); 
    $("li.health").mouseover(function() { 
     $("div.health,div.subjectarea_box").fadeIn(); 
    }); 
    $("div.row2").mouseleave(function() { 
     $("div.health,div.subjectarea_box,.subjectarea_box > div").hide(); 
    }); 

    $(".subjectarea_topics li[class!='housing']").mouseover(function() { 
     $("div.housing").hide(); 
    }); 
    $("li.housing").mouseover(function() { 
     $("div.housing,div.subjectarea_box").fadeIn(); 
    }); 
    $("div.row2").mouseleave(function() { 
     $("div.housing,div.subjectarea_box,.subjectarea_box > div").hide(); 
    }); 

    $(".subjectarea_topics li[class!='public-safety']").mouseover(function() { 
     $("div.public-safety").hide(); 
    }); 
    $("li.public-safety").mouseover(function() { 
     $("div.public-safety,div.subjectarea_box").fadeIn(); 
    }); 
    $("div.row2").mouseleave(function() { 
     $("div.public-safety,div.subjectarea_box,.subjectarea_box > div").hide(); 
    }); 

}); 

</script>

...这是一个怪物，我知道（而且可能非常低效）。

有人可以推荐一个更好和更少的错误的方式来完成这项任务？

谢谢!!!

来源

2011-07-06 Febrium

说实话，我并没有很努力地看待这个，但是如果你用“鼠标”换掉了你的“鼠标悬停”呢？（这是你通常与“mouseleave”配对......）

来源

2011-07-06 02:23:03

克里斯汀，谢谢你的提示。我只是尝试了交换，不幸的是发生了同样的错误（从一个到下一个快速悬停时出现多个框）。 – Febrium

嗯...怎么样捣毁这些低劣的东西，用“悬停”来代替？ http://api.jquery.com/hover/ –

$（...）.hover（onHoverFunction，onMouseLeaveFunction）对于你正在做的事情来说是简单的速记，虽然它使用了我认为的“mousenters”事件。 – jdc0589

~~这听起来像你正试图完成漂亮的工具提示/气球消息。虽然我不总是喜欢只是建议一个jQuery插件来做事情，但这对其中一个很有用。~~

~~这是一个相当不错的插件 http://flowplayer.org/tools/tooltip/index.html，以及 http://jquery.bassistance.de/tooltip/demo/~~

对不起我没有立即回复，辛苦一点麻烦拍摄没有一些代码工作。如果没有其他人发布可接受的回复，请考虑发布jsfiddle演示。

这是有点风马牛不相及，但是当你有可能就是工作正常，我只是还没有见过的语法，它更经常可以看到像选择：

$(".subjectarea_topics li[class!='arts-culture-recreation']")

写成：

$(".subjectarea_topics li:not(.arts-culture-recreation)")

你需要努力减少冗余代码，这将使问题更容易解决。

来源

2011-07-06 02:28:46 jdc0589

也许一些不那么冗长的东西更容易管理，我敲了一个粗略的例子，其中我持有div的引用以显示链接的rel属性。它减少了一个相对简单的任务所需的代码剪切量 - 尽管这个例子可能不完全如您所描述的那样 - 这是一种更简单的方法。

http://jsfiddle.net/tkVZ4/

HTML：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title></title> 
    </head> 
    <body> 

     <ul id="links"> 
      <li><a rel="one" href="#">one fish</a></li> 
      <li><a rel="two" href="#">two fish</a></li> 
      <li><a rel="red" href="#">red fish</a></li> 
     </ul> 

     <div id="container"> 
      container 
      <div id="one">one</div> 
      <div id="two">two</div> 
      <div id="red">red</div> 
     </div> 
    </body> 
</html>

CSS：

#container, #container div{ 
    display: none; 
}

的Javascript：

$(function(){ 
    $('#links li a').mouseover(function(){ 
     var toShow = '#' + $(this).attr('rel'); 
     $('#container').show(); 
     $(toShow).show(); 
    }).mouseout(function(){ 
     $('#container, #container div').hide(); 
    }) 
});

来源

2011-07-06 02:49:46 sauldraws

啊你打我吧。我的答案类似，但基本相同。好的！ +1 –

感谢您的提示！我现在唯一的问题是能够悬停在弹出的div上（可以说我想把链接放在那里）。我该如何实现这一点？ – Febrium

@sauldraws：我已经将你的jsfiddle的代码编辑到了你的文章中，所以如果链接将来会中断，你在SO上的答案仍然对其他人有用。 – DarthJDG

我建议你安装在T的详细信息您的元素自己指定哪个div将在鼠标悬停上显示。

尝试类似：

$("li.arts-culture-recreation, li.civic-vitality, li.demographics") //Etc etc 
    .mouseover(function 
    { 
     var cssClass = $(this).attr("class"); 
     $("div.subjectarea_box, div." +cssClass).show(); 
    }).mouseleave(function() 
    { 
     var cssClass = $(this).attr("class"); 
     $("div.subjectarea_box, div." + cssClass).hide(); 
    });

的jsfiddle例如：http://jsfiddle.net/9jHyD/

来源

2011-07-06 02:54:47

将鼠标悬停在列表项目上时会出现div？

回答

相关问题