728x90
See the Pen Untitled by ParkJooHong (@ParkJooHong) on CodePen.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <style> .btnColor{ background-color:red; } </style> <script src="http://code.jquery.com/jquery-3.4.1.js"></script> <script> $(document).ready(function(){ $('button').hover(function(){ $(this).addClass('btnColor'); }, function(){ $(this).removeClass("btnColor"); }); }); </script> </head> <body> <button>축구</button> <button>농구</button> <button>족구</button> </body> </html> | cs |
$(this).addClass('btnColor')
현재 버튼에 btnColor라는 클래스를 추가한다. 버튼에 클래스가 추가되면 버튼의 스타일이 변경될 수 있다.
$(this).removeClass("btnColor")
현재 버튼에서 btnColor 클래스를 제거한다. 버튼의 스타일이 원래대로 돌아간다.
반응형
'✨ Front-end > jQuery' 카테고리의 다른 글
| [jQuery] Click시 만들어 놓은 CSS 스타일 넣어주기 (0) | 2023.09.07 |
|---|---|
| [jQuery] 입력 문자열 제한 keyup( ) 과 slice( ) (0) | 2023.09.05 |
| [jQuery] JSON 표기법, 임시 회원으로 로그인 성공, 실패 처리해보기 (0) | 2023.09.04 |
| [jQuery] var( ) 비밀번호 일치 여부 확인하기, (중복체크) (0) | 2023.09.04 |
| [jQuery] innerHTML, text 바꾸기 (0) | 2023.09.04 |
댓글