使用JavaScript更改元素的“悬停”或“活动”属性

Question

我的页面上有一个元素，如果用户将鼠标悬停在其上或单击它，则该元素具有不同的样式。通常，图像是雪花。当鼠标悬停在它上面时，雪花图像将被相同的雪花发光蓝色替换，当它处于活动状态时，图像将被相同的发光雪花替换，但略小一些。这会产生雪花在悬停时发光的错觉，并在点击鼠标时收缩。

但是，我想制作它，以便雪花根据分数改变其外观。这就是我的意思：

var snowflakeBG = document.getElementById("MainSnowFlake");

changeFlakeImage = function(){
    if (mainScore >= 100){
        snowflakeBG.style.backgroundImage = "url(Images/Snowflake100BG.png)";
    }

一旦用户的分数达到100，这可以很好地用“snowflake100BG”替换正常的雪花。问题是，我不知道如何更改元素：hover和：active。有人可以解释一下吗？