It's because you have targeted the image as the hover area rather then
the li, use this instead
$("li.clickable").hover(function() {
$(this).children("img").attr("src",
$(this).attr("src").split("_off").join("_over"));
}, function() {
$(this).children("img").attr("src",
$(this).attr("src").split("_over").join("_off"));
});
Hover over the li, then get the child element within the context of
'this' to perform the actions to it.
wheatstraw wrote:
What I want to have happen is when you hover over the li it:
1) allows you to click the who area (this works)
2) The image swap.
Right now the image will only swap when hovering over the image not
the rest of the li.
Any help would be appreciated!
$(document).ready(function(){
$('li.clickable').css('cursor', 'pointer').click(function() {
window.location = $('a', this).attr('href');
});
$("li.clickable img").hover(function() {
$(this).attr("src", $(this).attr("src").split("_off").join
("_over"));
}, function() {
$(this).attr("src", $(this).attr("src").split("_over").join
("_off"));
});
});
