<input
type="checkbox"
id="dayChoice1"
name="daysInput"
value="1"
onClick={dayOnClick}
></input>
<label htmlFor="dayChoice1">
<div className="dayLabel__Div">월</div>
</label>
이런식으로 되어있는 input들이 있다.
이때 버튼 위에 hover했을 때 색깔이 변하게 만들고 싶다.
input{
display: none;
}
label:hover {
color: white;
border-radius: 50%;
}
label:hover로 작성해도 잘 안됐다.. 그래서
input:hover {
color: white;
border-radius: 50%;
}
이렇게 input에 hover를 주었는데도 안됐다.
생각해보니까 이렇다.
내가 원하는 상태는 label위에 hover했을 때, label안에 있는 div 모양이 바뀌는 것이었다.
label:hover {
.dayLabel__Div {
color: white;
border-radius: 50%;
}
}
이렇게 자식으로 넣어주면 해결된다.