Question

我有一个菜单，需要以下行为：

将鼠标悬停在列表项（而不仅仅是文本）上时，背景应更改颜色，文本将变为白色。（仅适用于单线）。在整个网站范围内，所有跨度都有颜色设置，我无法更改（包含在css顶部）所以我需要覆盖它只是这个菜单。

我发现了类似的问题，但没有找到任何具体的内容。

HTML

<ul id="navbar">
  <li><a href="#">Line 1</a></li>
  <li><a href="#"><span>Line 2 <br>Line 2 - 2nd Row</span></a></li>
  <li><a href="#"><span>Line 3<br>Line 2 - 2nd Row</span></a></li>
  <li><a href="#">Line 4</a></li>
</ul>

CSS

span {
  color: #feb800;
}

#navbar {
  height: 105px;
  line-height: 105px;
  vertical-align: middle;
}

ul#navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-align: center;
  width: 100%;
  white-space: nowrap;
  padding-left: 0;
  font-size: 0; // remove whitespace to prevent extra space before list item
}

#navbar li {
  float: none;
  display: inline-block;
  width: 25%;
  text-transform: uppercase;
  vertical-align: middle;
}

#navbar li {
  border-right: 2px solid #feb800;
}

#navbar li:last-child {
  border-right: none;
}

#navbar a {
  display: block;
  color: #feb800;
  font-weight: bold;
  font-size: 16px;
  text-decoration: none;
}

#navbar a {
  height: 105px;
}

#navbar a:hover {
  background-color: #feb800;
  color: #ffffff;
}

#navbar a span {
  line-height: normal;
  vertical-align: middle;
  display: inline-block;
}

#navbar a span:hover {
  color: #ffffff;
}

Answer 1

将:hover移至li元素。在上面的情况下，而不是整个#navbar a:hover选择器put：

#navbar li:hover {
  background-color: #feb800;
  color: #ffffff;
}
#navbar li:hover a {
  color: #ffffff;
}

span的背景不一定是一般的，因为它会影响页面上的所有跨度。

垂直对齐的固定高度多行列表项，具有整个项目的悬停行为（不仅仅是文本）

1 个答案: