鼠标悬停时无法更改背景颜色

Question

我正在努力让部分背景颜色在鼠标悬停时发生变化。我正在尝试将整个部分变成 link。现在，只有节内的元素变成 links，而不是块本身。

如果我在 <a> 之前删除 <section> 整个块变成 link 但鼠标悬停时背景窗台不会改变。我在菜单中有一个相同的场景并且它有效，所以我在这里有点困惑。我也想知道为什么只有元素在一个部分变成 links 而它在我的子菜单中做相反的事情。下面的部分代码：

.ch-section {
  position: relative;
  min-height: 140px;
  max-height: 140px;
  width: 400px;
  color: $ch-section-text;
  font-size: 13px;
  border-bottom: 1px solid $body-1px-line;
}
.ch-section a {
  display: block;
  width: 400px;
  text-decoration: none;
}
.ch-section a.active {
  font-weight: bold;
}
.ch-section a:hover:not(.active) {
  background-color: yellow;
  color: $sn-list-link-active;
}

<section class="ch-section">
  <a href="#">
    <span class="ch-section-selected not"></span>
    <img class="ch-section-image" src="assets/images/profileimg2.png" alt="img">
    <span class="ch-section-user">
      <span class="ch-section-status online"></span>
      <span class="ch-section-name">Lindset T. Peters</span>
      <span class="ch-section-location">Location, Province</span>
    </span>
    <time class="ch-section-date">8:48 AM</time>
    <i class="fa fa-e1-message-sent ch-section-message"></i>
    <span class="ch-section-snippet">Hey, it was really good to see you over the weekend, I look forward to...</span>
  </a>
</section>

Answer 1

I'm struggling with getting a section background color to change on mouse over. I'm trying to turn the entire section into a link. Right now, only the elements inside the section become links, not the block itself.

If I remove the prior to the the whole block becomes a link but the background sill does not change on mouse-over.

这是因为您有 a 作为 section 的子项，所以将其设置为父项（就像我在您之前的问题中所做的那样）。

.ch-section {
  position: relative;
  min-height: 140px;
  max-height: 140px;
  width: 400px;
  color: $ch-section-text;
  font-size: 13px;
  border-bottom: 1px solid $body-1px-line;
}
a {
  text-decoration: none;
}
a .ch-section {
  display: block;
  width: 400px;
}
a.active .ch-section {
  font-weight: bold;
}
a:hover:not(.active) .ch-section {
  background-color: yellow;
  color: $sn-list-link-active;
}

<a href="#">
  <section class="ch-section">

    <span class="ch-section-selected not"></span>
    <img class="ch-section-image" src="assets/images/profileimg2.png" alt="img">
    <span class="ch-section-user">
      <span class="ch-section-status online"></span>
    <span class="ch-section-name">Lindset T. Peters</span>
    <span class="ch-section-location">Location, Province</span>
    </span>
    <time class="ch-section-date">8:48 AM</time>
    <i class="fa fa-e1-message-sent ch-section-message"></i>
    <span class="ch-section-snippet">Hey, it was really good to see you over the weekend, I look forward to...</span>

  </section>
</a>

Answer 2

这里的实际问题是您没有设置 a 标签的高度。但是，当将 a 标签高度设置为 100% 时，您会发现它仍然不起作用。这是因为 section 没有指定固定高度。相反，您将 min-height 和 max-height 指定为相同的高度，这实际上没有意义。相反，如果您指定 height:140px，它将按预期工作：

.ch-section {
  position: relative;
  height: 140px;
  width: 400px;
  font-size: 13px;
}
.ch-section a {
  display: block;
  height: 100%;
  text-decoration: none;
}
.ch-section a.active {
  font-weight: bold;
}
.ch-section a:hover:not(.active) {
  background-color: yellow;
}

<section class="ch-section">
  <a href="#">
    <span class="ch-section-selected not"></span>
    <img class="ch-section-image" src="assets/images/profileimg2.png" alt="img">
    <span class="ch-section-user">
      <span class="ch-section-status online"></span>
      <span class="ch-section-name">Lindset T. Peters</span>
      <span class="ch-section-location">Location, Province</span>
    </span>
    <time class="ch-section-date">8:48 AM</time>
    <i class="fa fa-e1-message-sent ch-section-message"></i>
    <span class="ch-section-snippet">Hey, it was really good to see you over the weekend, I look forward to...</span>
  </a>
</section>

鼠标悬停时无法更改背景颜色

Cannot get the background color to change on mouseover

html

css

hover