sass 숙제 질문

[김하빈]

html

<div class="container">
        <ul class="sh-list mt-5">
            <li class="active">Cras justo odio</li>
            <li>Dapibus ac facilisis in</li>
            <li>Mori leo risus</li>
        </ul>
    </div>

 

sass

.sh-list{
    li{
        list-style: none;
        padding: 15px;
        border: 1px solid #eee;

        &:hover .active{
            background: red;
            color: white;
        }
    }
}

li에 마우스를 올릴 시 active 클래스를 가진 li의 배경을 변경 하고 싶었습니다만 동작하지 않습니다. 혹시 뭐가 문제 일까요?

[codingapple]

띄어쓰기는 내부요소 선택하는거라 li 내부의 .active를 선택하는중입니다 

li.active:hover 라고 써야 잘 작동할듯요

 

[김하빈]

제가 질문을 잘못 적은 것 같습니다.

적어주신 것은 li중 active 클래스를 가진 돔에 hover이벤트가 발생되었을 때인 것 같다고 생각합니다.

원하는 것이 모든 li 중 어느 한  li에  hover이벤트가 발생했을 때  active  클래스를 가진 모든 돔의 css를 변경하고 싶은 것 이었는데 혹시 제가 잘못 이해하고 있는 걸까요?

[codingapple]

마우스올렸을 때 내 다음형제요소나 자식요소 선택은 되는데

이전에 있는 형제요소선택은 안될듯해서 자바스크립트가 필요할듯요

[김하빈]

답변 감사드립니다.

[글쓴이]

글