I tested your code here and works fine. I just ident your code to look
better.
On Mon, Feb 9, 2009 at 00:05, mkmanning <michaell...@gmail.com> 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">
> > <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]
>
