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]
