Question

当用户将鼠标悬停在列表项上时，我在网站上显示div时遇到了很多麻烦。基本上，我有一个链接列表。当用户将鼠标悬停在其中一个上面时，我需要显示两个div - 一个是所有悬停共有的背景框，另一个是与该列表项相关的内容。当鼠标离开“row2”区域（其中包含所有内容）时，我还需要所有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>

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

有人可以推荐一种更好，更少错误的方法来完成这项任务吗？

谢谢!!!

Answer 1

也许一些不那么冗长的东西会更容易管理，我把一个粗略的例子拼凑在一起，我拿着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();
    })
});

Answer 2

说实话，我并没有非常认真地看待这一点，但是如果你用“老鼠”换掉你的“鼠标”呢？（这就是你通常与“mouseleave”配对的东西......）

Answer 3

~~听起来你正在尝试完成漂亮的工具提示/气球消息。虽然我不总是喜欢建议一个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)")

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

Answer 4

我建议您使用自身信息设置元素，以指定鼠标悬停时显示哪个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/

将鼠标悬停在列表项上时会显示div吗？

4 个答案: