只有当我的鼠标打开时，如何才能使导航栏上的文字悬停

Question

我如何才能确保只有当鼠标在文本上时，导航栏才能被单击 像that site

这是html：

<header>
        <ul>
            <li class="Nevo"><a href="#">Home</a></li>
            <li class="contacts"><a href="#">Contact Us</a></li>
        </ul>
    </header>

这是CSS：

ul {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-align: center;
  color: white
}

li {
  float: left;
  text-align: center;
}

li a {
  display: flex;
  text-align: center;
  align-items: center;
  text-decoration: none;
}
.Nevo a {
  background-image: url(logosite.png);
  background-size: 100% 100%;
  width: 120px;
  height: 120px;
  text-indent: -1400px;
  text-align: center;
}
.contacts a {
  color:white;
  /* First we need to help some browsers along for this to work.
     Just because a vendor prefix is there, doesn't mean it will
     work in a browser made by that vendor either, it's just for
     future-proofing purposes I guess. */
  -o-transition:color .2s ease-out, background 2s ease-in;
  -ms-transition:color .2s ease-out, background 2s ease-in;
  -moz-transition:color .2s ease-out, background 2s ease-in;
  -webkit-transition:color .2s ease-out, background 2s ease-in;
  /* ...and now for the proper property */
  transition:color .2s ease-out, background 2s ease-in;
  bottom: 10px;
  font-size: 20px;
}
.contacts a:hover {
  color:purple;
}

我想让鼠标悬停在li上，因为我不喜欢鼠标悬停在li上