I news for all of you, none of these suggestions work. Here is my code you can run it and see. When I add the last click handler it breaks the 2nd one and nothing happens. My guess is that is still not the right selector.
<!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";> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script src="../js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ /* makes inner div light gray */ $("#apDiv2").css('background-color','#EEEEEE'); /* makes inner dive dark gray when clicked */ $('#apDiv2').click(function() { $("#apDiv2").css('background-color','#666666'); }); /* this should make inner div light gray when the outer div apDiv1 is clicked */ $("div:not(#apDiv2)").click(function() { $("#apDiv2").css('background-color','#EEEEEE'); }); /* $("div:not(#apDiv2)") john $("div:not('#apDiv2')") klaus */ }); </script> <style type="text/css"> <!-- #apDiv1 { position:absolute; width:761px; height:372px; z-index:1; background-color: #CCCCCC; } #apDiv2 { position:absolute; width:216px; height:315px; z-index:1; left: 32px; top: 21px; background-color: #FFFFFF; } --> </style> </head> <body> <h1>How do I...focus and defocus using not</h1> <div id="apDiv1"> <div id="apDiv2"></div> </div> </body> </html>
