Thanks but it doesn't seem to work...
<li class="clickable"><img src="http://localhost/wrt-demo/images/
projects/boxes/13_off.jpg" alt="Abuja Master Plan" /> <p
class="entryText"><a href="http://localhost/wrt-demo/projects/detail/
Abuja-Master-Plan/13">Abuja Master Plan</a></p></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"));
});
This works but not what I was trying to achieve:
$(".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"));
});
On Aug 25, 10:52 am, Liam Potter <radioactiv...@gmail.com> wrote:
> 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"));
> > });
> > });
