リスト項目の上にカーソルを置いたときにdivを表示させますか？

Question

私は、ユーザーがリスト項目の上を移動したときに、自分のサイトにdivを表示するのに問題があります。基本的に、私はリンクのリストを持っています。ユーザーがその中の1つを上に移動すると、2つのdivが表示されます.1つは背景のすべてのボックスに共通し、もう1つはそのリストアイテムに関連するコンテンツでいっぱいです。マウスが "row2"領域（すべてが内部に含まれています）を離れると、すべてのdivが消滅する必要があります。私が以下のスクリプトは半作業ですが、あるリスト項目から次の項目項目にマウスをすばやく移動すると、項目は「積み重ねられ」、正しく消えません。あなたはここに、この問題を見ることができます

：それはモンスターだ、私が知っている（そしておそらくひどく非効率的な）...

$(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> 

を：ここで

は、私が現在持っているjQueryのです。

誰かがこのタスクを達成するためのより良い、より少ない方法でバグをお勧めしますか？

ありがとうございます！

Answer 1

正直言って、私はこれを非常に注意深く見ていませんが、あなたの "マウスオーバー"を "マウスメンター"と交換したらどうでしょうか？ （それはあなたが通常 "mouseleave"とペアにしているものです）...

Answer 2

あなたはきれいなツールチップ/バルーンメッセージを探しているようです。私はいつもjqueryプラグインを使って何かをするように勧めていませんが、これは良いものです。

これはかなり良いプラグイン http://flowplayer.org/tools/tooltip/index.htmlだけでなく、 http://jquery.bassistance.de/tooltip/demo/

私はいくつかのコードで作業をすることなく、トラブルシュートに即時応答、少しハードを持っていけない申し訳ありませんです。受け入れ可能な応答を誰も投稿していない場合は、jsfiddleのデモを公開することを検討してください。

は、これは少しは無関係ですが、何あなたはおそらく持っていることは正常に動作し、私はちょうど前に構文を見たhaventながら、それははるかに一般的のようなセレクタを確認することです。

：として書か

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

を

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

冗長コードを減らす必要がありますが、問題をもっと解決しやすくなります。

Answer 3

多分少し冗長な方が扱いやすいと思うかもしれませんが、リンクのrel属性で表示するdivの参照を保持している大まかな例を一緒にノックしました。これは、比較的シンプルな作業に必要なコードの剪断量を削減します。この例は、記述したとおりではありませんが、はるかに簡単なアプローチです。

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 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/