jquery hover 이벤트를 사용하여 table_jquery의 인터레이스 색상 변경 기능을 구현하는 예

jQuery hover 이벤트

hover(over,out)는 hover 이벤트(마우스가 객체 위로 이동하거나 객체 밖으로 이동하는 경우)를 시뮬레이션하는 메서드입니다. 이는 자주 사용되는 작업에 대해 "유지" 상태를 제공하는 사용자 정의 방법입니다.
일치하는 요소 위로 마우스를 이동하면 첫 번째로 지정된 기능이 실행됩니다. 마우스가 이 요소 밖으로 이동하면 지정된 두 번째 기능이 트리거됩니다. 또한 마우스가 여전히 특정 요소(예: div의 이미지)에 있는지 여부가 감지되면 이동 이벤트를 트리거하지 않고 계속 "호버" 상태를 유지합니다. (mouseout의 사용을 수정했습니다. 이벤트에서 흔히 발생하는 실수입니다.)

매개변수:
over(함수): 요소 위에 마우스를 올렸을 때 실행되는 함수
out(함수): 마우스를 올렸을 때 실행되는 함수 요소 밖으로 이동

예:
마우스 오버 테이블과 특정 클래스

jQuery 코드:

코드 복사 코드는 다음과 같습니다.

$(".table_list tr").hover(
function() {
$(this ).addClass("hover");
},
function () {
$(this).removeClass("hover")
}

);

여기서 몇 가지 사항에 유의하세요.

1.hover는 클래스이므로 원하는 효과를 작성할 수 있습니다.

2. jquery.js 파일을 가져오는 것을 잊지 마세요. 그렇지 않으면 작동하지 않고 오류가 보고됩니다.

3. this.bgColor='red'와 같은 기존 CSS에 비해 훨씬 간단하고 한 줄씩 추가할 필요가 없습니다.

4. 물론 홀수 행과 짝수 행은 서로 다른 효과를 낼 수 있습니다.

오늘은 jquery의 각 메서드를 사용하는 더 간단한 방법을 찾았습니다. 인터레이스 색상 변경 효과를 얻으려면 코드 한 줄만 있으면 됩니다. 마우스가 움직여도 변경되지 않습니다.

코드 복사 코드는 다음과 같습니다.

$(".tablist tr"). 각각(함수 (i){this.style.BackgroundColor=['#ccc','#fff'][i%2]})