[SCSS] input label에 hover했을 때 효과

Hmm·2022년 1월 13일
0

CSS / SCSS

목록 보기
5/9
post-thumbnail

                <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%;
       }
     }

이렇게 자식으로 넣어주면 해결된다.

0개의 댓글