Thanks for the reply. I eventually removed the "-color" and "-image" for the
css "background".
mkmanning wrote:
>
>
> 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">
>> # "background-color: white; color:
>> white;">.
>> </li>
>> <li class="ash">
>> # "background: gray
>> url(img/ts/ash.png); color:
>> gray;">
>> .
>> </li>
>> <li class="light_blue">
>> # "background-color: #baedff;
>> color: #baedff;">.
>> </li>
>> <li class="yellow_haze">
>> # "background-color: #ffdb87;
>> color: #ffdb87;">.
>> </li>
>> <li class="kiwi_lime">
>> # "background-color: #5ba621;
>> color: #5ba621;">.
>> </li>
>> <li class="light_pink">
>> # "background-color: #ffb8ff;
>> color: #ffb8ff;">.
>> </li>
>> <li class="sand">
>> # "background-color: #dcd2c9;
>> color: #dcd2c9;">.
>> </li>
>> </ul>
>> </div>
>> </div>
>> <div id="cfilter"></div>
>> </body>
>> </html>
>> [/code]
>
>
--
View this message in context:
http://www.nabble.com/.hasClass%28%29-not-behaving-as-expected.-tp21905932s27240p21950227.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
