Question

I have a list, with each list element having a textarea and an img. When I hover over one of the list’s textareas, I want the respective img to change src.

The problem is that when I hover over a textarea on one of the lists, all the imgs on the list change, not just the one on that list item.

$('.rightMainP').hover(function() {
    $('#rightMain').find('img:first-child').attr('src', '../Images/whiteSidewaysNub.png');
}, function() {
    $('#rightMain').find('img:first-child').attr('src', '../Images/graySidewaysNub.png');
});

In my code, there are multiple imgs in each list item, and my jquery can not specify to only change the one in the list item that has the textarea that is being hovered over.

Answer 1

You need to select the <img> which is inside the same list element as the <textarea> you hover on. This should do it:

$('.rightMainP').hover(function() {
    $(this).closest('li').find('img').attr('src', '../Images/whiteSidewaysNub.png');
}, function() {
    $(this).closest('li').find('img').attr('src', '../Images/graySidewaysNub.png');
});

Whenever the hover event is triggered, the attribute change is performed on all images which are descendants of the same list element that the hovered textarea is a descendant of. That should be just one image.

If the textareas and images are actually children of the same element (i.e. they are siblings), then you can also use

$('.rightMainP').hover(function() {
    $(this).siblings('img').attr('src', '../Images/whiteSidewaysNub.png');
}, function() {
    $(this).siblings('img').attr('src', '../Images/graySidewaysNub.png');
});