CSS hover 와 javascript mouseover 이벤트 구분하기

발생일: 2011.12.30

문제:
엘리먼트에 hover 효과(롤오버)가 적용되어 있는 경우,
CSS hover 로 구현된 것인지,
mouseover/mouseout 이벤트로 효과를 준 것인지 쉽게 구별할 수 있는 방법이 있을까?

해결책:
마크업 담당자에게 문의하던 과정에서 알게된 방법~ ^^
별 것 아닌 것 같지만, 요고요고 유용하다.ㅎㅎ

  1. 개발자 도구의 엘리먼트 패널에서 대상 엘리먼트를 inspect 한다.
  2. 대상 엘리먼트에 마우스 오버/아웃 해본다.
  3. 클래스나 스타일의 변경이 직접적으로 보인다면 자바스크립트로 변경한 것.
      아닐 경우, CSS에서 :hover 클래스로 호버 효과를 준 것이다.

# 기타 참고.
- CSS 가상 클래스 우선순위: http://cssdesign.kr/forum/viewtopic.php?id=514