안녕하세요, 초보 front-end 개발자입니다.

지금 제가 작성하고 있는 코드입니다.

(내용은 생략하고 클래스 이름만 남겨놨습니다.)

 <section id="about">
        <!-----about-heading--------------------------->
        <div class="about-heading">
            <span>안녕하세요</span>
        </div>
        <!----about-box-container---------------------->
        <div class="a-b-container">
            <!--box-1---------------------------------->
            <div class="a-box"></div>
            <!--box-2---------------------------------->
            <div class="a-box"></div>
            <!--box-3---------------------------------->
            <div class="a-box"></div>
        </div>
    </section>

각각의 a-box 클래스를 선택하였을 때, 안녕하세요가 각각 다른 텍스트로 바뀌었음 좋겠습니다.

대충 그림판으로 그리면 다음과 같아요

원래는

https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered

ㄴ이 글 참고해서 밑에처럼 접근하려고 했는데,

.a-box:nth-child(1):hover ~ #default{
    display: none;
}

완전 sibling상황에만 해당되나보네요..

css로만 해결을 할 수 있는지, 아니면 javascript를 사용해야하는지, javascript를 사용해야하면 어떤식으로 해야하는지 키워드라도......

답변해주실 고수분들에게 미리 무한한 감사를 드립니다.

아무리 구글을 뒤져도 안나와요ㅠㅠㅠ 한번만 도와주십쇼