jquery hover and nested lists.

Question

I really need someone's help.

this is what i'm trying to do to .. http://www.chohoh.com/pcs/hoverthing.html

now I need to change the font to #fff on the 'month, day and info' when you hover over the element.

people keep giving me hints. "child" i've googled (child, jquery, hover) and I'm not finding anything related to what i'm looking for. nor are there any good explanations on how to do this either.

any help, advice is appreciated !!! hope to hear from someone soon

-lb

Answer 1

Assuming that the month, day and info are in separate TDs, you can simply add this to your CSS:

td:hover {
  color: #fff;
}

No jQuery needed.

Answer 2

Miss chohoh,

As with my other answer, you need to add the on hover action.
I ran the following code in firebug and it works in at least firefox.

It selects all the elements with the proper class, then add's the hover action to all of them.

$.each(
        // The group of objects to modify, all objects of class .tik-date and type <p> 
        $(".tik-date p"), 
        function () {         // The function to run on all the objects in the first argument
           $(this).hover( 
              function () {   // The first function is run when the mouse hovers
                 $(this).css("color","#fff"); // Modify the CSS "color" attribute 
              },
              function () {   // The second function is run when the mouse moves away.
                 $(this).css("color","#000");
              }
           )
        }
 );

This is what I'm guessing you want to do for IE6?

 $.each(
        // The group of objects to modify, all objects of class .tik-date and type <p> 
        $("ul.tikt-txt"), 
        function () {         // The function to run on all the objects in the first argument
           $(this).hover( 
              function () {   // The first function is run when the mouse hovers
                 $(this).css("background-image","url(\"images/buytiks.png\")");  
              },
              function () {   // The second function is run when the mouse moves away.
                 $(this).css("background-image","");
              }
           )
        }
 );

Answer 3

I figured it out.

It was just the way I was ordering things. got it!!!

Hope this helps someone else in the future.

http://www.chohoh.com/pcs/jquery.hover.example.html

Answer 4

I always used this kind of code:

$('tr').hover(function(){ // replace tr with ANY tag you want.
 $(this).addClass('hover');
}, function(){
 $(this).removeClass('hover');
});

If you want to add hover on more than once item, you can use an array selector:

$('tr, div, span').hover....

Of course, in css, you can do this:

1) use a separate stylesheet for IE6 (and bind this hover function ONLY for IE6)

2) use .hover (instead of :hover) anywhere you need it. However, you should consider that you may have some performance leaks if you do this way.

instead of:

tr:hover td {background:red}

you will have:

tr.hover td,
tr:hover td {background:red}