hover 유지시키기

어떤 메뉴에 hover이벤트가 발생했을 경우 css 디자인이 바뀌는 경우가 있을 수 있다.

그런데 이 메뉴에 hover 이벤트가 발생하면, 어떤 특정한 요소 A가 이 메뉴를 가리는 효과가 있다고 하자.

그렇게 되면 A가 메뉴를 가리면서 마우스 포인터가 A위에 놓이게 되고, 이에 따라 메뉴 hover의 효과가 사라지는 경우가 발생할 수 있다.

따라서 hover가 발생하면 :hover로 가상클래스로 css를 정의하지 말고, hover 클래스 등 특정 클래스를 add해주고 hover에서 나오는 경우 다시 hover 클래스를 remove해주는 식으로 하면 메뉴 위에 어떤 효과가 나타나서 hover이벤트가 풀려도 디자인은 그대로 hover가 되있는 것처럼 만들 수 있다.

참고예제 : http://tympanus.net/codrops/2010/01/17/css-and-jquery-tutorial-fancy-apple-style-icon-slide-out-navigation/