jQuery - 버튼에 마우스 오버 상태에서 클릭한 뒤 마우스 상태에 맞게 css로 만드는 팁

css로만으로 처리하면 참 좋을 듯 한 이 기능은 css에서 hover를 이용하게 되면 클릭했을 때 마우스가 hover라는 영역을 벗어나더라도 hover 상태가 되어 있을 때가 있다.

물론 마우스를 조금만 움직여도 다시 out 상태로 돌아가긴 하지만 상황에 따라 바로 out상태로 구분되어져야하는 상황이 있기 때문에 jquery 코드와 css 코드로 응용해본다.

$('#menuButton').on('click',function(e){
            //클릭했을 때 액션이 있다면 여기에 스크립트 작성
        }).mouseenter(function(e){
            var _this = $(this);
            _this.addClass('hover');
        }).mouseleave(function(e){
            var _this = $(this);
            _this.removeClass('hover');
        });

# menuButton 버튼에 마우스를 올리면 버튼에 hover라는 클래스가 생기는 것이고 아웃하게 되면 hover 클래스가 지워지게 만든다.

#menuButton{
    background-color: blue;
}
#menuButton.hover{
    background-color: red;
}

 위 코드처럼 css를 작성하게 되면 버튼에 배경색이 변경되는 것을 볼 수 있다.

Subscribe
Notify of
guest

이 사이트는 스팸을 줄이는 아키스밋을 사용합니다. 댓글이 어떻게 처리되는지 알아보십시오.

0 댓글
Inline Feedbacks
View all comments
TOP