悬停在FF中不起作用

Question

ul {
  list-style-type: none;
  padding: 0px 5px 0px 5px;
  margin: 0px;
}

ul li {
  border-bottom: 1px solid #B9D3EE;
}

ul li a:link,
ul li a:visited,
ul li a:active {
  width: 100%;
  color: blue;
}

ul li a: hover {
  width: 100%;
  color: #ffffff;
  background-color: #B9D3EE;
}

在 IE 中，上面的代码将在悬停时突出显示整个单元格。 但在 FF 中，它只会突出显示其中的链接。 我希望 FF 像 IE 一样突出显示整个单元格。

这里是列表： 请记住，仅创建了第一个链接，因为我刚刚开始创建此列表并在发现此问题时停止对其进行测试。

<ul>
  <li><a href="">beauty</a></li>
  <li>creative</li>
  <li>Info Tech. (IT)</li>
  <li>cycle</li>
  <li>event</li>
  <li>financial</li>
  <li>legal</li>
  <li>lessons</li>
  <li>medical</li>
  <li>marine</li>
  <li>pet</li>
  <li>automotive</li>
  <li>farm+garden</li>
  <li>household</li>
  <li>labor/move</li>
  <li>MKT/COMM</li>
  <li>office</li>
  <li>skill'd trade</li>
  <li>real estate</li>
  <li>health/wellness</li>
  <li>travel/vac</li>
  <li>write/ed/tr8</li>
</ul>

非常感谢任何帮助！

Answer 1

您可以将 a 元素设为块元素，这样它们将获得父元素的所有宽度（演示：http://jsfiddle.net/WasWE/）。

ul li a:link, ul li a:visited, ul li a:active {
  display: block;
  color: blue;
}

ul li a:hover {
  background-color: #B9D3EE;
  color: #ffffff;
}​

或者您可以将hover 事件添加到li 元素（演示：http://jsfiddle.net/XmwTV/）：

ul li:hover {
  background-color: #B9D3EE;
}

ul li a:link, ul li a:visited, ul li a:active {
  color: blue;
}

ul li a:hover {
  color: #ffffff;
}

Answer 2

嗨，现在删除 anchor link css 中的 with 100% 并在 anchor 中定义 display block css

像这样

ul li a: link,
ul li a: visited,
ul li a: active {

display:block; // add this line
width:100%; // remove this line

  color: blue
}

ul li a:hover{
width:100%; //remove this line
  color: #ffffff;
  background-color: #B9D3EE;
}

Demo