Fourteen buttons with hover effects

I have just started learning coding and am trying to clean up a website that I am making. Everything is functional, but I imagine there is a better way write everything that is there, because a good chunk of it is repeated each time (the part with mouseover and mouseout) Is there a way to create a command like mouseover that applies to all images/buttons?
























You can actually do this entirely in CSS with no need for JavaScript. You just have to switch to using background-image instead of an image within the anchor and apply a unique class (or id) to each element to target them in your CSS.



.button {
display: inline-block;
width: 40px;
height: 40px;
}
.star {
background-image: url(https://docs.google.com/drawings/d/1wK8ruJOkmgUaadrdB-fhBA2z-2I4EL5Yvf2nK68xpxU/pub?w=40&h=40);
}
.mj {
background-image: url(https://docs.google.com/drawings/d/1MAeTP02X9cQrGoTnCZX_nF2l7xksiWjYb30drGhuspM/pub?w=40&h=40)
}
.one {
background-image: url(https://docs.google.com/drawings/d/1KdfLMuWGRdzjh_5Yqtmct_l_NulVui7gxZJ3IGTgpaQ/pub?w=40&h=40);
}
.button:hover {
background-image: url(https://docs.google.com/drawings/d/1Sb4sO71xOTgg3nyfJ1PmbqAC_ucTDsEqDm2CiZFyDA8/pub?w=40&h=40);
}









StackExchange Code Review Q#85716, answer score: 11