是否可以使用if语句修改图标？

Question

因此，我参加了为期5天的编码挑战赛，该挑战赛解释了HTML，CSS和JavaScript的非常非常基础的知识。

每天向我介绍一个新挑战。 现在我已经成功并以100％的分数完成了挑战。

但是挑战之一是当您将光标悬停在图标上时修改图标。当鼠标悬停在鼠标上时，修改会放大图标，并恢复到其正常大小。

我设法通过下面的基本简单方法来做到这一点。

<script>
    function ingredientsHover() {
        document.getElementById('ingredients').firstElementChild.firstElementChild.style.fontSize = '300%';
    }


    function ingredientsNormal() {
        document.getElementById('ingredients').firstElementChild.firstElementChild.style.fontSize = '100%';
        // document.write("Normal");  
    }


    function preparationHover() {
        document.getElementById('preparation').firstElementChild.firstElementChild.style.fontSize = '300%';
    }


    function preparationNormal() {
        document.getElementById('preparation').firstElementChild.firstElementChild.style.fontSize = '100%';
    }
</script>

现在我想知道的是，是否可以通过使用if语句和1函数获得相同的结果？

还是我想得太多，还是可以做得更轻松？

感谢您的投入，我仍然学到很多东西！