아니 땐 굴뚝에 hover 날까

마우스를 올려놓으면, hover 효과처럼 배경색이 사라지는 오류가 발생했다. 모바일 기준으로도 똑같이 배경색이 사라지고 멈추는 걸 보니 hover가 맞다고 생각했다.

 

의아한 점은 모바일에서 hover가 적용되지않는다는 것을 깨닫고.. 분명히 hover를 전부 제거했기 때문이다! 

 

 

 

 

 

해결을 위해 알아보다가 처음 알게 된 것인데, 개발자도구의 :hov를 클릭해서 hover를 적용하면 hover일 때 적용되는 css를 알 수 있다.

 

 

 

 

 

적용 후 찾아보니 이런 코드가 들어있는 것을 확인할 수 있었다. 뭔가 익숙한걸 보니 내가 쓴 게 맞는 거 같았다. 그러다 문득 라이브러리를 커스텀했던 게 떠올랐다.

 

 

 

 

 

라이브러리에서 기본적으로 제공하는 hover 효과를 안 보이게 하려고 위와 같은 코드를 썼었던 것이다.

 

아무 생각 없이 전역 선택자를 써버려서, 모든 요소에서 적용이 되었던 것 ㅎ.. 

 

 

 

 

 

범위를 라이브러리로 제한 후 다시 확인하면

 

 

 

 

 

해결했다 

 

전역 선택자를 생각 없이 쓰지 말아야겠다. 그리고 다음부터는 module css라도 사용해야 할 것 같다. 

 

이번뿐만 아니라 작업하면서 css 중첩(?)을 몇 번 겪었었는데,  약간 두려워지기 시작했다. 만약 배포했다가 css가 꼬이면 어쩌지?라는 생각..  이제 와서 첨부터 할 수도 없는 노릇이고.. 

 

머리 아프다 머리 아파