Click link when clicking LI
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开发者_Python百科 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!
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');
}
});
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
精彩评论