checkbox hover기능 + 컬러 변경

//비전공자가 혼자 공부하는 공간입니다 

//잘못된 정보가 있을 수 있어요

/* 체크 리스트에 마우스 올려두었을 때*/

label:hover {
    color: rgb(48, 178, 48);
}

input[type=checkbox],
input[type=checkbox]:hover {
    -moz-appearance: none;
    -webkit-appearance: none;
    -o-appearance: none;
    outline: none;
    content: none;
}

input[type=checkbox]:before {
    content: "✓";
    font-size: 18px;
    color: transparent !important;
    display: block;
    width: 15px;
    height: 15px;
    border: 1.5px solid rgb(113, 108, 108);
    border-radius: 5px;
    margin-right: 0px;
}

input[type=checkbox]:hover:before {
    content: "✓";
    font-size: 18px;
    color: transparent !important;
    display: block;
    width: 15px;
    height: 15px;
    border: 1.5px solid rgb(48, 178, 48);
    border-radius: 5px;
    margin-right: 0px;
}

input[type=checkbox]:checked:before {
    color: white !important;
    width: 15px;
    height: 15px;
    border: 1.5px solid rgb(48, 178, 48);
    background-color: rgb(48, 178, 48);
}

input[type=checkbox]:checked+label {
    color: rgb(48, 178, 48);
}

리스트에 마우스를 올려두면 왼쪽 사진처럼 색이 변해야 하는데 

네모 박스 위에만 올려두었을 때는 박스만 색이 변하고 해당 라벨은 색이 변하지가 않는다 

내 코드에서 어떤 부분이 잘못되었는지 찾아보려고 한다 

 

 

label:hover {
    color: rgb(48, 178, 48);
}

⬇️ 위 코드를 아래와 같이 바꾸기

input[type=checkbox]:hover,
input[type=checkbox]:hover + label,
label:hover {
    color: rgb(48, 178, 48);
}

여기서 input[type=checkbox]:hover+label { color: rgb(48, 178, 48) }; 이 코드 하나만 작성해도 실행이 되는데 

왜 여기에 input[type=checkbox]: hover, label:hover 도 같이 넣어야 하는지 궁금해졌다 

 

 

✅우선 각각의 코드를 해석해보자

label:hover

체크박스 인풋과 연결 됐든 안 됐든 관계없이 마우스가 label 위를 맴돌 때 label을 대상으로 한다

이렇게 하면 label 내부의 텍스트를 강조 표시하는 등 label 요소와 상호 작용할 때 스타일을 label 요소에 적용할 수 있다 

 

input[type=checkbox]: hover

마우스가 input 요소(checkbox) 위를 맴돌고 있을 때만 checkbox로 설정된 유형의 input 요소를 대상으로 한다

즉, 박스 색만 변경 될 것 

 

input[type=checkbox]:hover+label

checkbox input 요소 바로 뒤에 설정된 label 요소를 대상으로 하지만 input 요소가 호버링되는 경우에만 대상이 된다

이렇게 하면 해당 checkbox 위를 맴도는 경우에만 label 요소에 스타일을 적용할 수 있다

 

 

요약하면,

input[type=checkbox]:hover 는 checkbox 자체를 대상으로 하고,

input[type=checkbox]:hover + label 은 checkbox 가 hover 될 때 checkbox 관련된 레이블을 대상으로 하며,

label:hover는 checkbox 와 관계없이 레이블을 대상으로 한다

 

 

그런데 코드의 해석을 따르면

input[type=checkbox]:hover + label {
    color: rgb(48, 178, 48);
}

이 코드 한 줄만 작성해도 기능이 구현이 되는데 왜 내가 찾아본 걸로는 위 세 코드를 다 넣은 걸 알려준 걸까 

 

 

답은

'+' selector가 바로 옆의 형제 요소만 대상으로 하기 때문에 
HTML 구조에서 checkbox input과 label 사이에 무언가가 있을 경우 
input[type=checkbox]:hover + label 을 사용하면 원하는대로 구현이 안 될 수가 있다

이 경우, input[type=checkbox]:hover 을 사용하여 마우스 커서가 올라와있을 때 checkbox 를 타겟으로 하고
label:hover 를 사용하여 label 위에 마우스 커서가 올라갔을 때 label을 타겟으로 따로 정해줘야 한다

 

그런데 내 HTML 코드의 checkbox 와 label 사이에는 아무것도 없기 때문에 
input[type=checkbox]:hover + label 만 작성하더라도 checkbox 와 label 색상을 모두 변경할 수 있다 

결론은 심플하게 아래 코드만 써도 될 것 같다 

input[type=checkbox]:hover + label {
    color: rgb(48, 178, 48);
}

 

 

//비전공자가 혼자 공부하는 공간입니다 

//잘못된 정보가 있을 수 있어요