In your code you're attaching the hover event to the anchor tags; in
the sample html none of the anchors has a class (the class is on the
parent li element).
On Feb 8, 4:24 pm, MiD-AwE <cr.midda...@gmail.com> wrote:
> 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]
