OK. Sooooo..... Close! Even "done" if this is the best that can be had.
You all were right about adding and removing classes. You were just suggesting they be added and removed in the wrong place. The parent class should be removed when the child element is entered. Vice Versa, when the child element is exited, the parent class should be reset. Only one problem which you can check in code below. It works good if you move sort of slow or medium into the child div. You can watch the parent class lose its features (be removed). But, working FROM BELOW the bottom border of the child div (which is also the bottom border of the parent div), if you "zip" the mouse UPWARD past the bottom border and onto the last "member", you will move too fast for the class to be removed. In other words, you zip right through the "innerDiv" and right onto the "member." There was not enough time of presence in the innerDiv before heading into member to cause a fire within innerDiv. So, senate's class does not get removed. A dirty, little plug, which I included in a comment below in the "member" mouseenter() below, is to ALSO turn off the class for senate. It's sort-of a "catch-all." It will work, and it is tolerable. One unfortunate effect is you can see the senate flicker as you enter from the bottom border. That VERY FIRST, TEENY, TINY pixel at the edge is the "no-man's land" where senate gets fired. 1 pixel up, and the next fire occurs to turn it off. Thus, the flicker effect. Thank you all so much for working me through this. Couldn't have done it without you. Here's the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ jquery.min.js"></script> <title>Sandbox</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <style type="text/css" media="screen"> body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; } .senate, .house { font-size:12px; margin-left:5px; padding:0; color: black; font-style: normal; cursor: default; text-decoration: none; border:1px solid black; } .highlight { color: blue; } .highlight * { color: black; } #innerDiv { border:1px solid black; } .member { /*border:1px solid black;*/ } </style> <script type="text/javascript"> $(function() { $('.senate').mouseenter(function(event) { //console.log("Related target: "+event.relatedTarget.nodeName); //console.log("Current target: "+event.currentTarget.nodeName); $(this).addClass('highlight'); }).mouseleave(function(event) { $(this).removeClass('highlight'); }); $('.member').mouseenter(function(event) { // The next comment line is the catch-all. // Uncomment this, and you will cure the problem described above // of moving through the // innerDiv too quickly. //$(".senate").removeClass("highlight"); $(this).addClass('highlight'); }).mouseleave(function(event) { $(this).removeClass('highlight'); }); $('#innerDiv').mouseenter(function(event) { $(".senate").removeClass("highlight"); }).mouseleave(function(event) { $(".senate").addClass("highlight"); }); }); </script> </head> <body> <div id="senate" class="senate">Senate <div id="innerDiv"> <p id="s1" class="member">member</p> <p id="s2" class="member">member</p> </div> </div> </body> </html>
