Javascript 在鼠标移动时更改字体，并在第二次鼠标移动时恢复字体

我正在寻找一种方法来改变鼠标在单个字母上移动时的字体。我希望当您第二次将鼠标移到单个字母上时（而不是第一次将鼠标移开时），这些字母会变回原来的字体

---

非常感谢您的任何帮助

下面是一个简单的jQuery示例

var hoveredCounter = 0;
$('.post-text').hover(function(){

    //hover in
    hoveredCounter++;
    //console.log(hoveredCounter);

    if(hoveredCounter == 1){
        $(this).addClass('new-font');//or $(this).css('font-family', 'Arial');
    } else if(hoveredCounter == 2) {
        $(this).removeClass('new-font');//or $(this).css('font-family', 'Verdana');
    }
}, function(){
    //hover out
})

.old-font{
    font-family: "Arial";
}

.old-font.new-font{ /* using 2 classnames so the rule will have bigger priority*/
    font-family: "Verdana"
}

如果您希望每个字母都可以更改，则需要为每个字母分别设置

。您可以通过使用classList通过

自动执行该操作

var elLi=document.queryselectoral（'li'）；
对于（变量i=0；i

正文{
字体系列：“Arial”；
}
李{
利润率：10px0；
}
.时报{
字体系列：“时代”；
}

文本1
文本2