Css 我的a：由于某种原因，悬停不起作用

不知道为什么不起作用，但这是我的代码

 .tm-nav ul li{
 display: inline-block;
 margin-top: 20px;}

 .tm-nav ul li a {
 padding: 10px 20px;
 text-decoration: none; 
 font-family: Trebuchet MS;
 font-size: 22px;
 margin-left: 50px;
 color: #8e7e6b;
 }

 .tm-nav a:hover: {
  color: black;}

这是我的HTML：

     <nav class="tm-nav">
                 <ul>
                   <li><a href="#">Home</a></li>
                   <li><a href="#">About</a></li>
                   <li><a href="#">Products</a></li>
                   <li><a href="#">Privacy</a></li>
                 </ul>
               </nav>

每当我将鼠标悬停在导航链接上时，它们不会改变颜色，甚至在：hover下添加文本装饰：下划线也不会生效

.tm-nav a:hover: {
  color: black;}

应该是

.tm-nav a:hover {
  color: black;}

---

你有一个额外的冒号。tm nav a:hover{}

---

我删除了冒号，并在我的计算机上尝试了它，它成功了。

您的代码当前格式不正确，您可以在此处看到由堆栈溢出提供的插入代码占位符。您可能希望修复此问题以提高可读性。可能是：悬停后？下面有一个很好的答案。为什么不接受呢？