children() only works for direct children of an element, so if your
img is wrapped in an <a>, it won't find the right element.
Try using find() instead:
$("li.clickable").hover(function() {
$(this).find("img").attr("src", $(this).attr("src").split
("_off").join("_over"));
}, function() {
$(this).find("img").attr("src", $(this).attr("src").split
("_over").join("_off"));
});
On Aug 25, 5:05 pm, wheatstraw <psurr...@gmail.com> wrote:
> 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"));
> > > });
> > > });
