Question

我正在努力让鼠标悬停时更改部分背景颜色。我试图把整个部分变成一个链接。现在，只有部分内的元素成为链接，而不是块本身。

如果我在<section>之前移除了<a>，则整个块变为链接但背景窗口在鼠标悬停时不会改变。我在菜单中有一个相同的场景，它可以工作，所以我在这里有点困惑。我也想知道为什么只有元素变成带有一个部分的链接，而它在我的子菜单中却相反。部分代码如下：

.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

我正在努力让部分背景颜色改变   鼠标移到。我试图把整个部分变成一个链接。对   现在，只有部分内的元素成为链接，而不是块   本身。

如果我删除之前整个块变成了   链接但背景窗台在鼠标悬停时不会改变。

这是因为你有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，它将按预期工作：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: