[jQuery] Re: mouse control issue within nested tags

[jmatthews]

I'm going to have to sleep on this.  I am flustered.

I think adding a class like that actually creates a second class, and
that the second class is also inherited by children.  Here'e the
frustrating part:


When the sub-table opens up under House, it has a set of tree branches
on the left.  I refer to them as .dottedCheckBoxColumn because I
basically filled the cell with some dashes and pipes and reduced the
font to 3 pt to give a light, dashed appearance.

So, Senate is ABOVE dottedCheckBoxColumn.

Now, when I leave the font-size in Senate uncommented (set it to
12px), it changes the font-size on my dottedCheckBoxColumn and makes
those dashes and pipes full size.  Of course, this causes visual
havoc.  But curiously, the havoc only occurs when you mouseover
Senate.

Why would the Senate font-size be inherited by dottedCheckBoxColumn,
when the dottedCheckBoxColumn expressly sets the font-size at 3px?

I am surmising, at this point, that mousingover Senate ADDS a second
class to senate, which also designates a 12px font.  Now, I have two
classes in Senate, BOTH with 12px font-size.

The font-size of 3px in dottedCheckBox overrides the first coming from
Senate, but NOT the second.


.House,.Senate,.Assembly,.placemark
{
        font-size:12px;
        etc....
}


.chamberHighlight
{
        font-size:12px;
        color:blue;
        font-style:italic;
        /*text-decoration:underline;*/
        cursor:pointer;
        /*border-spacing:0;*/
}
.chamberHighlight *
{
        font-size:12px;
        color:black;
        font-style:normal;
        /*text-decoration:none;*/
        cursor:default;
        /*border-spacing:0;*/
}



.dottedCheckBoxColumn
{
        //  The column left of checkBox columns, which contains the tree of
dots.
        height=10px;
        width:7px;
        font-size:3px;
        line-height: 80%;
        vertical-align:top;
        border-spacing:0;
        /*border:1px solid black;        */
}




$(".House,.Senate,.Assembly,.placemark").mouseenter(function(event)
{
    $(event.target).addClass('chamberHighlight');
}).mouseout(function(event)
{
    $(event.target).removeClass('chamberHighlight');
});