JavaScript가 마우스 오버를 시뮬레이션하여 Chrome에서 CSS :hover를 활성화할 수 있나요?

JavaScript로 CSS ":hover"를 활성화하기 위해 마우스 오버 이벤트 시뮬레이션

질문:

"마우스 오버"를 트리거했음에도 불구하고 이벤트가 발생하더라도 CSS ":hover" 선언은 비활성 상태로 유지됩니다. theElement.classList.add("hover")를 사용하여 요소에 "hover" 클래스를 수동으로 추가하려고 시도해도 효과가 없습니다. CSS ":hover" 속성을 활성화하여 Chrome에서 마우스 오버를 성공적으로 시뮬레이션할 수 있습니까?

답변:

다음과 같은 방식으로 마우스 오버를 시뮬레이션하는 것은 불가능합니다. 보안 제한으로 인해 CSS ":hover" 선언이 실행됩니다. 사용자 상호 작용 또는 DOM 변경에 의해 트리거된 이벤트는 신뢰할 수 있는 것으로 간주되는 반면, JavaScript로 생성된 이벤트는 신뢰할 수 없는 것으로 간주됩니다.

W3C 사양에 따르면 신뢰할 수 없는 이벤트는 기본적으로 CSS ":hover 활성화를 포함하여 브라우저 작업을 트리거해서는 안 됩니다. " 효과. 마우스 오버 동작을 효과적으로 시뮬레이션하려면 각각 "mouseover" 및 "mouseout" 이벤트의 요소에서 사용자 정의 클래스를 수동으로 추가하고 제거해야 합니다. 그런 다음 이 사용자 정의 클래스를 사용하여 ":hover" 선언의 효과를 모방하여 CSS를 통해 원하는 스타일을 적용할 수 있습니다.

위 내용은 JavaScript가 마우스 오버를 시뮬레이션하여 Chrome에서 CSS :hover를 활성화할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!