將鼠標懸停在列表項上時是否顯示 div？

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

老實說，我並沒有認真考慮這一點，但是如果您將“mouseovers”換成“mouseenters”會怎樣？ （這就是你通常與“mouseleave”配對的......）

Answer 3

聽起來您正在嘗試完成漂亮的工具提示/氣球消息。 雖然我並不總是喜歡僅僅建議一個 jquery 插件來做事，但這對一個人來說是一個很好的用途。

這是一個相當不錯的插件 http://flowplayer.org/tools/tooltip/index.html ，還有 http/tooltipde//jquery/bassistance。

抱歉，我沒有立即回復，如果不使用一些代碼很難解決問題。 如果沒有其他人發布可接受的響應，請考慮放置一個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/