hover시 안에 글자까지 hover 효과

<div className="box">
<span className="title"> 안녕 </span>
</div>

 

 

전체를 감싸는 div 상자가 있고 그 안에 span 글자가 있다.

만약 마우스를 올려놓는 hover를 했을 때

상자와 글자의 색이 바뀌는 효과를 주고 싶다면..?

 

둘 다 hover 효과를 주면 되겠지 하고

 

 

.box{
background-color: white;
}

.box: hover{
background-color: green
}

.title{
color: green;
}

.title: hover{
color: white;
}

 

 

이런식으로 코드를 작성한다면

(동영상을 첨부하려 하였으나 이상하게 올라감...)

 

hover하면 코드에 충실하게 div만 색이 바뀐다.

 

글자에 hover 해야 글자도 색이 바뀌는 것을 볼 수 있다.

 

우리가 원하는 것은 이게 아니다.

둘 다 동시에 바뀌는 것.

이때는 코드를 다르게 작성해야 한다.

 

글자 부분의 hover 코드를 바꿔야 하는데

' div안에 있는 글자 '

이걸 코드로 표현해 주어야 한다.

 

 

.box .title: hover{
color: white;

 

 

이렇게 작성해주면 div와 그 속에 있는 글자까지 함께 변경된다.

 

완성 -!!!