无法获得在鼠标悬停时更改的背景颜色

Question

我很努力地在鼠标悬停时更改部分背景颜色。我试图将整个部分变成链接。目前，只有部分内的元素变成链接，而不是块本身。

如果我在<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; 
 
} 
 
.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，它将按预期工作：

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