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

您好现在删除with 100% css中的anchor link并在display block

中定义{strong> css 中的anchor

就像这样

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 的

悬停不在FF工作

2 个答案: