Question

我正在努力研究这种非常简单的悬停效果，但我不明白我哪里出错了。我唯一想做的就是悬停时将文字颜色改为黑色 。我的代码如下：这是左侧菜单的CSS

/* === Left Menu === */
.leftmenu{

width:200px;
text-align:center;  
}
.leftmenu ul
{
  list-style-type:none;

  width:200px;

  margin:0;
  padding:0;
 }
.leftmenu ul li
{
  width:200px;
  text-align:center;
  border-bottom: 1px solid #005680;
}
.leftmenu ul li a
{
  display:block;
  text-decoration:none;
  background-color:#fff;
  color: #999;
  font-family:Arial, Helvetica, sans-serif;
  font-size:16px; 
  padding:8px;
  cursor:pointer;
}
.leftmenu a:hover
{
  display:block;
  colour:#000;
  display:inline;   
}

这是html代码：

 <div class="leftmenu" align="center">
    <ul>
     <li><a href="ABOUTUS1.HTML">About Us</a></li>
     <li><a href="Nutrition.html">Nutrition Facts</a></li>
     <li><a href="Dist.html">Trade With Us</a></li>
     <li><a href="Contact.html">Get In Touch</a></li>
    </ul>
  </div>

Answer 1

语法错误：colour:#000;应为color，您还需要摆脱display: inline;属性

Demo

Answer 2

删除display:inline并且颜色拼写错误

.leftmenu a:hover
{
  display:block;
  color:#000; 
}

<强> DEMO

左菜单的悬停效果不起作用

2 个答案: