Make div appear when hovering over list item?

I'm having a ton of trouble making a div appear on my site when the user hovers over a list item. Basically, I have a list of links. When the user hovers over one of them, I need two divs to appear - one being a background box that is common to all of the hovers, and the other being full of content that is relevant to that list item. I also need all the divs to disappear when the mouse leaves the "row2" area (which everything is contained within). The script I have below is semi-working, however, if a user moves their mouse quickly from one list item to the next, the items "stack up" and don't disappear properly.

You can see this issue here:

Here is the jQuery I currently have:

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

... it's a monster, I know (and probably terribly inefficient).

Can someone recommend a better and less buggy way to accomplish this task?

Thank you!!!

Maybe something a little less verbose would be more manageable, I knocked together a rough example where I'm holding the reference of the div to show in a rel attribute of the link. It cuts down on the shear amount of code you need for a relatively simple task - although this example may not be exactly as you describe it - it's a much simpler approach.

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();
    })
});

To be honest, I'm not taking a very hard look at this, but what if you swapped out your "mouseovers" with "mouseenters"? (That's what you usually pair with "mouseleave"...)

It sounds like you are attempting to accomplish nice looking tooltips/balloon messages. While I dont always like just suggesting a jquery plugin to do things, this would be a good use for one.

This is a pretty good plugin http://flowplayer.org/tools/tooltip/index.html, as well as http://jquery.bassistance.de/tooltip/demo/

Sorry I dont have an immediate response, little hard to trouble shoot without working with some code. If no one else posts an acceptable response, consider putting up a jsfiddle demo.

This is a little unrelated, but while what you have probably works fine and I just havent seen the syntax before, it is much more common to see selectors like:

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

written as:

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

You relaly need to work on cutting down on redundant code, it will make the problem a lot easier to solve.

I suggest you setup your elements with the information in themselves to specify which div will display on mouseover.

try something like:

$("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 example: http://jsfiddle.net/9jHyD/