I understand that this question has been answered before, but even after consulting those links, I am still unable to solve my problem. I want to replace my image (assets/img/social-mail.jpg) to another (assets/img/social-mail-hover.jpg), with a single class, because I have multiple images I would like to do this to. My basic thought process is this: When the class is hovered, take the ID, and replace its image with another by adding "-hover" to its image link.

HTML:

`<img id="social-mail" class="box-social" src="assets/img/social-mail.jpg">`

JS:

```
$(".box-social").hover(function(e) {
    var id = $(this).attr("id");
    var icon = id.split("-")[1];
    var image = "img/social-" + icon + "-hover.jpg";
    $(id).find("img").attr("src", image);
});

```

I've tested id, icon, and image; and they all give me exactly what I want. However, when I hover over the image, it still isn't being replaced. I'm not getting any errors either. What am I doing wrong? Thank you so much!