マウスオーバーで背景色を変更できない

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

私は マウスオーバーで変更するセクションの背景色を取得して苦労しています。セクション全体をリンクに変えようとしています。今すぐ右 セクション内の要素のみがリンクになり、ブロック ではなくリンクになります。

ブロック全体が先に削除された場合、 リンクになりますが、マウスオーバー時に背景の隙間は変わりません。

あなたが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; 
 
} 
 
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>