CSS 추가 버튼 이벤트 정보(CSS 마우스 클릭 이벤트 작성 방법)-컴퓨터 지식-php.cn

CSS 추가 버튼 이벤트 정보(CSS 마우스 클릭 이벤트 작성 방법)

王林

풀어 주다： 2024-02-12 13:20:39

앞으로

1047명이 탐색했습니다.

CSS 추가 버튼 이벤트 정보(CSS 마우스 클릭 이벤트 작성 방법)

ainer">

실제로 웹 페이지에 마우스 효과를 여러 번 설정해야 합니다. 링크와 같은 일부 효과는 자동으로 생성됩니다. 마우스를 위로 올리면 클릭하면 자동으로 손 모양으로 변합니다. , 때로는 입력 상자가 있을 때 마우스가 자동으로 영어 대문자 I로 변경됩니다. 그러면 필요한 것처럼 보이도록 더 많은 개체를 설정할 수 있습니까? 이것은 완전히 가능합니다.

코드 작성:

<div onmouseover=\"this.className=\'over\';\"><div onmouseover=\"this.className=\'over\'; this.id=\'over\';\"><div onmouseover=\"this.style.background=\'url(bj.png) no-repeat\';\" onmouseout=\"…;…\">

로그인 후 복사

기타 마우스 이벤트:

onClick: 마우스 클릭 이벤트(마우스 클릭 이벤트를 참조한 후 해제합니다.)

onDblClick: 마우스 더블 클릭 이벤트, 해제되고 다시 눌림. )

onMouseDown: 마우스를 눌렀을 때 발생하는 이벤트입니다.)

onMouseUp: (누른 상태에서 팝업까지의 마우스 떼기 이벤트를 의미합니다. .)

onMouseMove: 마우스 이동 이벤트(특정 요소 위에서 마우스를 움직이는 것을 의미합니다.)

onMouseOver: (즉, 포인터가 외부에서 요소로 이동할 때 발생합니다.)

onMouseOut: 마우스 이탈 이벤트. (마우스가 특정 요소를 떠날 때 발생합니다.)

onLoad: 로딩 이벤트. 또는 페이지 로딩이 종료됩니다.)

onUnload: 언로드 이벤트 )

onScroll: 스크롤 막대 스크롤 이벤트(방문자가 스크롤 휠을 사용하여 위 또는 아래로 움직일 때 생성됨)

Case:

이 사용자 정의 스타일을 이미지에 적용합니다. 이미지가 흑백으로 표시됩니다. 이 스타일은 내용이 없으며 빈 스타일입니다.

<style type=\"text/css\">  .over {}.out {filter: Gray}</style>

로그인 후 복사

그런 다음 "onMouseOver="를 추가합니다. " this.className을 이미지 태그로 (IMG) ='over'" onMouseOut="this.className='out'"", 이는 마우스가 지나갈 때 그림이 오버 스타일, 즉 일반 컬러 이미지, 마우스가 떠날 때 그림은 흑백 이미지입니다. oMouseOver 및 onMouseOut은 마우스 이벤트이며, this.className="..."은 현재 객체의 클래스 이름을 의미합니다. ..., 대소문자를 틀리게 쓰지 않도록 주의하세요. JS는 대소문자에 매우 민감합니다

이렇게 하면 효과가 완성됩니다. 저장하고 브라우저에서 열면 이미지가 흑백으로 표시됩니다. 마우스를 위로 올리면 이미지가 컬러가 되고, 마우스를 떼면 이미지가 다시 흑백으로 변경됩니다. 상상력을 발휘하는 한 this.className 마우스 메소드를 통해 아름다운 것들을 많이 만들 수 있습니다.

마우스 포인터:

<span style=\"cursor:crosshair\">十字</span><span style=\"cursor:text\" >文本光标</span><span style=\"cursor:wait\" >等待</span><span style=\"cursor:default\" >默认</span><span style=\"cursor:help\" >问号</span><span style=\"cursor:e-resize\" >左右箭头</span><span style=\"cursor:s-resize\" >上下箭头</span><span style=\"cursor:auto\" >系统自动给出效果</span><span style=\"cursor:url(\'图标的地址\')\" >系统自动给出效果</span>

로그인 후 복사