Having multiple image with same hover over effects

Question

So i currently have multiple images on a page, however when i want over hover effect on the one that is being hovered over. Where the page has more than 12 images, one way is to replicate this code 12 times, with an id but is there a more efficient way:

$("img").hover(function () {
    $("img").addClass("transition");
}, function () {
    $("img").removeClass("transition");
});

Answer 1

You could use in/out hover handler to toggle the class:

$("img").hover(function () {
    $(this).toggleClass("transition");
});

But be aware, this could be done using only CSS with pseudo class :hover if your goal is just to apply transition to these images.

Answer 2

In order to apply hover effect only on currently hovered image and not on the other images, use $(this) as shown below :-

$("img").hover(function () {
    $(this).addClass("transition");
}, function () {
    $(this).removeClass("transition");
});