Click the link by clicking LI

Question

Ok, I have this list layout that I use, and I want the list line to stand out when I hover over it. Now this is not a problem, because I can use javascript to change classes, for example, but I want the cursor to change to a cursor when I hover over the cursor and when I click, I want to follow the link inside.

Sample code can be found here:

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

I also want to highlight LI only when it has a suitable link. Preferred to use jQuery ... Any ideas?

-

I edited the code to include the sentence below, and the problem is that the click () action fires when other elements inside LI are clicked ...

-

Right, now I edited the code. I added a class to links that MUST follow the click, and then event.stopPropagation () in links that DO NOT have this class, so they are handled accordingly by the browser.

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

It worked for me

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

I used the plugin jquery.color.js, it animates a really nice color change of the hover effect