마우스 오버시 변경할 배경색을 얻을 수 없습니다.

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>