When hovering over similar elements of the same type, I aim to trigger a function that will initiate an animation on these elements. However, since these elements do not have unique IDs, I am uncertain how to distinguish them individually in JavaScript. Is it possible to utilize the "this" keyword for this purpose? I prefer not to assign unique IDs to each element due to their large quantity and redundancy. Any assistance on this matter would be highly valued. Thank you.
Below is the code snippet I tried using to achieve this effect. It would be ideal if the solution could be kept simple or involve basic JavaScript functionality.
$(document).ready(function(){
$("span").hover(function(){
this.color = red;
});
});