代码之家 › 专栏 › 技术社区 › Shawn GameForreal

悬停在FF中不工作

hover dom css html

0

Shawn GameForreal · 技术社区 · 13 年前

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>

非常感谢您的帮助!

2 回复 | 直到 13 年前

1

Danil Speransky 13 年前

你可以让 a 元素作为块元素,因此它们将获得父元素的所有宽度(demo: 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;
}

2

-1

Rohit Azad Malik 13 年前

嗨,现在删除 with 100% 在您的 anchor link css和定义 display block 在你身上 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