Please help, I've been wrestling with this for too long now. I've put together this code to change the background of a div when the mouse hovers over a list of divs. One of the listed divs has a class name of ash and I want to add a background image on that one hover; all of the other listed divs only have colors. The problem is that the .hasClass() doesn't seem to be behaving as it should, or I'm not doing something, or I'm just completely clueless?
Below is my code and a sample html to test. Can someone please tell me what I'm doing wrong? Why is my $(this).hasClass('ash') not recognizing when my mouse hovers over the div with the class="ash"? Thanks in advance, [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" lang="en-us" xml:lang= "en-us"> <head> <meta content="text/html; charset=UTF-8" http-equiv="content-type" /> <title>mouseover color changer with preview</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/ jquery.min.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function () { $.cstmzclrns = {clkclr : "white"};//$.cstmzclrns.clkclr $("#colors ul li a").hover( function () { if (!$(this).hasClass('ash')) { var color = $(this).css("background-color"); $("#cfilter").css({'background-color' : color}); $("#cfilter").css({'background-image' : 'none'}); } else { $("#cfilter").css({'background-color' : 'transparent'}); $("#cfilter").css({'background-image' : 'url(img/ts/ash.png)'}); } }, function () { if ($.cstmzclrns.clkclr == 'ash') { $("#cfilter").css({'background-color' : 'transparent'}); $("#cfilter").css({'background-image' : 'url(img/ts/ash.png)'}); } else { $("#cfilter").css({'background-color' : $.cstmzclrns.clkclr}); $("#cfilter").css({'background-image' : 'none'}); } }).click( function () { if ($(this).hasClass('ash')) { $.cstmzclrns = {clkclr : "ash"}; $("#cfilter").css({'background-color' : 'transparent'}); $("#cfilter").css({'background-image' : 'url(img/ts/ ash.png)'}); } else { $.cstmzclrns = {clkclr : $(this).css("background-color")}; $("#cfilter").css({'background-color' : $.cstmzclrns.clkclr}); $("#cfilter").css({'background-image' : 'none'}); } }); }); //]]> </script> <style media="screen" type="text/css"> body { background-color: black; } #cfilter { margin: 0px; padding: 0px; opacity: 0.503; position: absolute; width: 473px; height: 466px; display: block; right: 0px; top: 0px; float: right; z-index: 1; clear: none; background-color: white; } #customize { border: 3px solid #afa688; margin: 0px; padding: 10px 10px 10px 13px; font-size: 0.8em; font-family: Arial,Helvetica,sans-serif; display: block; float: left; clear: left; position: absolute; opacity: 0.899; background-color: #f4e2ab; color: black; width: 200px; top: 25px; z-index: 3; } #colors { border-style: solid; border-width: 1px; padding: 0px; position: relative; background-color: white; height: 21px; top: 9px; width: 137px; left: 31px; display: block; } #colors ul { border-style: none; border-width: 1px; list-style-type: none; position: relative; top: -11px; width: 99.9%; left: -39px; height: 99.9%; } #colors ul li { margin: 0px; padding: 0px; float: left; } #colors ul li a { border: 1px solid black; margin: 0px 0px 0px 2px; padding: 0px; height: 15px; display: block; list-style-type: none; list-style-position: inside; width: 15px; float: left; } </style> </head> <body style="direction: ltr;"> <div id="customize">Mouse over color blocks to see the design in available colors. <div id="colors"> <ul> <li class="white"> <a href="#" style= "background-color: white; color: white;">.</a> </li> <li class="ash"> <a href="#" style= "background: gray url(img/ts/ash.png); color: gray;"> .</a> </li> <li class="light_blue"> <a href="#" style= "background-color: #baedff; color: #baedff;">.</a> </li> <li class="yellow_haze"> <a href="#" style= "background-color: #ffdb87; color: #ffdb87;">.</a> </li> <li class="kiwi_lime"> <a href="#" style= "background-color: #5ba621; color: #5ba621;">.</a> </li> <li class="light_pink"> <a href="#" style= "background-color: #ffb8ff; color: #ffb8ff;">.</a> </li> <li class="sand"> <a href="#" style= "background-color: #dcd2c9; color: #dcd2c9;">.</a> </li> </ul> </div> </div> <div id="cfilter"></div> </body> </html> [/code]