無法獲得在鼠標懸停時更改的背景顏色

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>