Question

Basically, I have two images, each in a separate div. When I do a mouseenter on the first image, I need the second image to change in the other div.

The image that changes comes after the image with the mouseenter in the code. So far, I have

<script>

var Read1 = $("img[src$='/reading1.png']");
var Read2 = $("img[src$='reading2.png']");


$('#shelf-1').mouseenter(function() {
$('#read').find(Read1).replaceWith(Read2)
});
</script>

I am very new to using jquery, so I feel lost. Any help would be greatly appreciated.

Answer 1

Put ids on your image tags instead of your divs so that it’s easier to access them. Then its at simple as

$('#read1').mouseenter(function () {
    $('#read2').attr('src', 'reading2.png');
});

If you are sold on your solution, the reason it isn’t working is because the variables Read1 and Read2 are incorrect. Read1 should be the string selector you are looking for and Read2 should be the proper html you want to replace the element with. The following should work:

<script>
    var Read1 = "img[src$='/reading1.png']";
    var Read2 = "<img src='path/to/reading2.png'>";

    $('#shelf-1').mouseenter(function() {
       $('#read').find(Read1).replaceWith(Read2)
    });
</script>