jQuery의 hover 메소드는 선택된 요소의 강조 표시를 구현합니다.

이 글에서는 주로 선택된 요소의 강조 표시 방법을 구현하기 위해 jQuery의 호버 방법과 CSS의 호버 선택기에 대한 기사를 제공합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리도록 하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

오늘 선배님의 웹페이지 제작을 도와주던 중 이런 요청을 받았습니다.

폼 안으로 마우스를 이동하면 안 되며, 폼의 투명도는 그대로 유지됩니다.

마우스가 테이블 안으로 이동하면 호버링된 셀의 투명도는 변경되지 않고, 호버링되지 않은 셀의 투명도는 변경됩니다.

먼저 제가 얻은 효과를 게시하겠습니다. 처음에는 테이블의 투명도가 그대로 유지됩니다.

두 번째 행의 세 번째 셀로 마우스를 이동하면 다른 셀의 투명도가 감소합니다.

Solution

처음에는 다음과 같은 CSS 구현 방법을 사용했는데

#table td{
 opacity:0.5;
}
#table td:hover{
 opacity:1;
}

근데 처음에 입력해 보면 테이블 투명도가 0.5로 아주 안 좋아 보입니다.

나중에 jQuery의 hover 방식을 사용했는데, 항상 내부의 모든 셀을 선택하는 과정이 너무 힘들어서 하나씩 소개하지는 않겠습니다.

$('#content td').hover(
  function(){
   $('#content td').css('opacity','0.5');
   $('#content td:hover').css('opacity','1');
   },
  function(){
   $('#content td').css('opacity','1');
  });

content는 내 테이블의 ID 이름입니다. 셀 호버 메서드에 두 가지 기능을 추가한 것을 볼 수 있습니다.

첫 번째 함수가 테이블로 이동하면 수석

$('#content td') .css('opacity','1');

은 마우스가 안으로 움직일 때 모든 셀의 투명도가 0.5가 되고

$('#content td:hover').css(' opacity',' 1');

여기서 CSS의 호버 선택기는 단일 셀을 선택하는 것을 의미합니다.

두 번째 기능은 마우스가 양식을 떠날 때를 나타냅니다.

관련 권장 사항:

호버 사용 예시 요약

CSS의 호버 선택기 사용에 대한 자세한 설명

호버와 클릭 이벤트 간의 관계 jQuery에서 충돌에 대한 자세한 설명(그림)

위 내용은 jQuery의 hover 메소드는 선택된 요소의 강조 표시를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!