为什么CSS：hover无法正常工作？

Question

我有一个导航菜单，当您将鼠标悬停在菜单中的链接/元素之一上时，该菜单会更改颜色。当您单击每个链接/列表项时，它将运行一个javascript函数，该函数将隐藏som内容，而其他一些内容将显示在页面上。同时，您正在访问的页面/链接的背景色也会改变。它可以正常工作，但是问题是，一旦单击链接之一，css代码ul.nav li：hover将不再起作用。

到目前为止，这是我的代码：

    function show_page1() {

        let page1 = document.querySelector("#page1");

        let page2 = document.querySelector("#page2");

        let page1_Link = document.querySelector("#page1_link");

        let page2_Link = document.querySelector("#page2_link");

        page2.style = "display: none";

        page1.style = "display: block";

        page1_Link.style = "background-color: #008CBA";

        page2_Link.style = "background-color: #f3f3f3";

    }

    function show_page2() {

        let page1 = document.querySelector("#page1");

        let page2 = document.querySelector("#page2");

        let page1_Link = document.querySelector("#page1_link");

        let page2_Link = document.querySelector("#page2_link");

        page2.style = "display: block";

        page1.style = "display: none";

        page1_Link.style = "background-color: #f3f3f3";

        page2_Link.style = "background-color: #008CBA";

    }

       ul.nav {

            list-style-type: none;

            margin: 0;

            padding: 0;

            overflow: hidden;

            background-color: #f3f3f3;;

            line-height: 1.5;

        }

        ul.nav li {

            float: left;

            display: inline-block;

            text-align: center;

            padding: 14px 16px;

            text-decoration: none;

        }

        ul.nav li:hover {

            background-color: lightgrey;

            cursor: pointer;

        }

        #page1_link {

            background-color: #008CBA;

        }

        #page2 {

            display:none;

        }