Click link when clicking LI

Question

Ok, I have this list layout that I use, and I want the list row to highlight when I hover it. Now, that's not a problem really, since I can use javascript to change classes for example, but I want the cursor to change to a pointer when hovering and when clicked, I want to follow the link within.

Example code can be found here:

http://sandman.net/test/hover_links.html

I also want to highlight the LI only when there is an eligible link inside it. Preferably using jQuery... Any ideas?

--

I've edited the code to incorporate the suggestion below, and the problem is that the click() action fires when I click other items inside the LI...

--

Right, so now I've edited the code. I've added a class to the link(s) that SHOULD be followed on click, and then a event.stopPropagation() on the links that does NOT have this class, so they are handeled by the browser accordingly.

Thanks again!

Answer 1

jQuery('li:has(a)')
    .css('cursor', 'pointer')
    .hover(function(){
        jQuery(this).addClass('highlight');
    }, function(){
        jQuery(this).removeClass('highlight');
    })
    .click(function(e){
        if (e.target === this) {
            window.location = jQuery('a', this).attr('href');
        }
    });

Answer 2

This worked for me

$('#element li').hover(function() { 
        $(this).animate({ 
          backgroundColor: "#4CC9F2" 
        }, "normal") 
      }, function() { 
        $(this).animate({ 
          backgroundColor: "#34BFEC" 
        }, "normal") 
      });

I used jquery.color.js plugin it animates really nice hover effect color change