将鼠标悬停在列表项上时是否显示 div？

Question

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

Answer 1

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

Answer 2

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"...)

Answer 3

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.

Answer 4

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/