为什么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;        }