html - 悬停功能在 CSS 侧栏中不起作用

Question

我已经为 HTML/CSS 网站边栏编写了代码，我想确保当用户将鼠标悬停在边栏中的某个元素上时，其背景会突出显示。

它只显示我的正常列表，悬停功能不起作用。有什么问题？

body {
  margin: 0;
}

.sidebar {
  float: right;
  background-color: #F4ECFC;
  /* Sidebar Background */
  width: 200px;
  /* Width of side bar */
  height: 900px;
  padding-top: 0px;
  /* Padding above the header */
  font-family: helvetica;
  /* Font for the sidebar */
}

.sidebar a {
  text-decoration: none;
  /* Removes the underline from links. */
  color: #0B0036;
  /* Text color of the menu items */
}

.sidebar ul {
  line-height: 40px;
  overflow: hidden;
  margin-left: 0;
  padding-left: 0;
}

.sidebar ul li .listItemA {
  /* list-style-type: none; */
  background-color: #F4ECFC;
  /* Background colour of the menu items. */
}

.sidebar ul li .listItemA a:hover {
  background-color: purple;
}

.listItemA {
  text-align: center;
}

<div class="sidebar">
  <ul>
    <li class="listItemA"><a href="#">Class1</a></li>

    <li class="listItemA"><a href="#">Class2</a></li>

    <li class="listItemA"><a href="#">Class3</a></li>

    <li class="listItemA"><a href="#">Class4</a></li>

    <li class="listItemA"><a href="#">Class5</a></li>
  </ul>
</div>

Answer 1

您首先要做的一件事是给您的链接 display: block;，这使它们占据 100% 的可用宽度。

然后像这样简化链接和相对悬停的样式:

.sidebar ul .listItemA {
  /* list-style-type: none; */
  background-color: #F4ECFC;
  /* Background colour of the menu items. */
}

.sidebar ul .listItemA:hover a {
  background-color: purple;
}

正如在对您的问题的评论中所指出的，您在 li 和 .listItemA 之间有一个空格，我只是删除了 li 以实现正确的选择器，但您也可以将选择器的那部分更改为 li.listItemA。

这里真正重要的变化是在列表项悬停时设置链接样式:

.sidebar ul .listItemA:hover a { ... }

这会告诉浏览器在悬停列表项时更改链接的背景。

body {
  margin: 0;
}

.sidebar {
  float: right;
  background-color: #F4ECFC;
  /* Sidebar Background */
  width: 200px;
  /* Width of side bar */
  height: 900px;
  padding-top: 0px;
  /* Padding above the header */
  font-family: helvetica;
  /* Font for the sidebar */
}

.sidebar a {
  display: block;
  text-decoration: none;
  /* Removes the underline from links. */
  color: #0B0036;
  /* Text color of the menu items */
}

.sidebar ul {
  line-height: 40px;
  overflow: hidden;
  margin-left: 0;
  padding-left: 0;
}

.sidebar ul .listItemA {
  /* list-style-type: none; */
  background-color: #F4ECFC;
  /* Background colour of the menu items. */
}

.sidebar ul .listItemA:hover a {
  background-color: purple;
}

.listItemA {
  text-align: center;
}

<div class="sidebar">
  <ul>
    <li class="listItemA"><a href="#">Class1</a></li>

    <li class="listItemA"><a href="#">Class2</a></li>

    <li class="listItemA"><a href="#">Class3</a></li>

    <li class="listItemA"><a href="#">Class4</a></li>

    <li class="listItemA"><a href="#">Class5</a></li>
  </ul>
</div>