UI를 만들다 보면 마우스를 올렸을 때 색상이나 스타일이 살짝 바뀌는 효과를 자주 넣게 된다.보통은 CSS :hover나 Tailwind의 hover: 클래스로 간단히 해결된다.그런데 이번에 이런 상황이 있었다.슬라이더의 진행도를 JS로 계산해서 linear-gradient로 표현하고 있었는데,hover시에 어두운 부분의 색상을 살짝 바꾸고 싶었다.단순히 색만 바뀌는 게 아니라, 진행도가 JS 계산식으로 동적으로 결정되는 구조라서 hover: 클래스로는 적용이 불가능했다.왜냐하면 CSS의 :hover는 정적인 스타일 변경에만 적용되며, JS로 계산된 값에는 접근할 수 없기 때문이다. 슬라이더의 진행도(percent)를 기반으로 그라디언트를 계산하는 구조라서, hover 상태에서 이 값을 조정하려면 JS가..