>  기사  >  웹 프론트엔드  >  CSS에서 onmouseover와 hover의 차이점은 무엇입니까?

CSS에서 onmouseover와 hover의 차이점은 무엇입니까?

零下一度
零下一度원래의
2017-06-28 10:50:282646검색

hover에는 마우스를 개체 위로 이동하는 동시에 마우스를 개체 밖으로 이동하는 과정이 포함되며, 해당 하위 클래스도 선택됩니다.

mouseover는 마우스가 개체 위로 지나갈 때 해당 개체를 포함하지 않는 모든 하위 클래스가 동시에 선택된다는 의미입니다.

가장 큰 차이점은 이벤트 드라이버가 호버 요소의 하위 클래스에도 추가된다는 것입니다. 그리고 마우스를 올리면 현재 요소에 이벤트 드라이버만 추가됩니다.

그리고 hover 이벤트에는 mouseover 이벤트가 포함됩니다


mousemove(fn);

각 일치 요소의 mousemove 이벤트에 핸들러 함수를 바인딩합니다.

hover(over, out);

호버 이벤트(마우스가 개체 위 또는 개체 밖으로 이동)를 시뮬레이션하는 메서드입니다. 이는 자주 사용되는 작업에 대해 "유지" 상태를 제공하는 사용자 정의 방법입니다.

일치하는 요소 위로 마우스를 이동하면 지정된 첫 번째 기능이 실행됩니다. 마우스가 이 요소 밖으로 이동하면 지정된 두 번째 기능이 트리거됩니다. 또한 마우스가 여전히 특정 요소에 있는지 여부를 감지합니다(하위 클래스 감지). 그렇다면 이동 이벤트(mouseout)를 트리거하지 않고 "hover" 상태를 계속 유지합니다.

$("td").hover( function () { $(this).addClass("hover"); }, 기능 () { $(this).removeClass("hover"); });

jquery 소스 코드에는 다음과 같은 단락이 있습니다.
hover: function( fnOver, fnOut ) {
return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
}

이것은 말해봐, 호버! = 마우스오버+마우스아웃. 그러나 hover=mouseenter + mouseleave.

과거에는 hover, link, Visited 및 active와 같은 의사 클래스는 a 태그에만 적용할 수 있다는 것만 알고 있었습니다. 즉, a:hover, a:link, a:visited, a:활성. 실제로 이 네 가지는 다른 HTML 태그와 다른 정의에 할당된 클래스에도 적용될 수 있습니다.

CSS 의사 클래스에 대한 자세한 내용은 다음을 참조하세요. http://www.w3school.com.cn/css/css_pseudo_classes.asp

a:link {color: #FF0000} /* 방문하지 않은 링크*/

a: Visited {color: #00FF00} /* 방문한 링크*/

a:hover {color: #FF00FF} /* 링크로 마우스를 이동하세요*/

a:active {color: #0000FF} /* 선택됨 링크*/


위 내용은 CSS에서 onmouseover와 hover의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.