CSS 마우스 반응 이벤트 처리, 이동, 클릭 예시 소개

집

웹 프론트엔드

JS 튜토리얼

CSS 마우스 반응 이벤트 처리, 이동, 클릭 예시 소개_javascript 기술

May 16, 2016 pm 05:23 PM

css

여러 유형의 마우스가 CSS 이벤트를 트리거합니다.
설명:
onMouseDown은 마우스를 눌렀을 때 트리거됩니다.
onMouseOver는 마우스가 그 위를 지나갈 때 트리거됩니다.
onMouseUp은 마우스를 눌렀다가 놓을 때 트리거됩니다.
onMouseOut은 마우스가 밖으로 움직일 때 트리거됩니다.
onMouseMove는 마우스가 움직일 때 트리거됩니다.

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

 
<html> ; 
<head> 
<title>CSS 마우스 응답 이벤트</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> ; 
<style type ="text/css"> 
.Off{ 배경색: #00FF66;} 
.up{배경색: #FF0000; } 
</style> ; 
<body> 
<ul class=Off onMouseOut="this.className='Off'" onMouseOver="this.className ='Up'"> 
<h4>마우스가 밖으로 움직일 때 마우스 응답 이벤트가 CSS를 전환합니다</h4> 
<li>onMouseDown은 마우스를 누를 때 트리거됩니다
<li>onMouseOver 마우스가 지나갈 때 트리거
<li>onMouseUp 마우스를 눌렀다가 놓을 때 트리거됩니다
<li>onMouseOut 마우스가 밖으로 움직일 때 트리거
<li>onMouseMove 마우스가 움직일 때 트리거됩니다.</ li> 
</ul> 
</html> 

 

🎜> 코드는 다음과 같습니다. <span style="color: red;">마우스가 테이블 위로 지나갈 때 색상 스타일을 변경합니다:<br> ;</span>

코드 복사

코드는 다음과 같습니다. <style> table { background-color:#000000; 커서:손; 너비:100%; }

td {

/*onmouseover 이벤트 설정*/ 
onmouseover: 표현식 (onmouseover=function (){this.style.borderColor ='blue';this.style.color= 'red';this.style.BackgroundColor ='yellow'}) 
/*onmouseout 이벤트 설정*/ 
onmouseout: 표현식(onmouseout=function (){this.style.borderColor='';this.style.color='';this.style.BackgroundColor =''}) 
배경색:#ffffff ; 
} 
</style> 
테이블의 다른 모든 행의 색상 변경 제어: 
간단한 적용: 
<style type="text/css"> 🎜><!-- 
tr { background-color:expression((this.sectionRowIndex%2==0)?" #E1F1F1":"#F0F0F0")} 
--> 고급 적용: 각 셀의 색상이 변경됩니다
<style type="text/css"> 
<!- - 
tr {Background-color:expression((this.sectionRowIndex%2==0 )?"빨간색":"파란색")} 
td {배경색:표현식((this.cellIndex%2= =0)?"":((this.parentElement.sectionRowIndex%2==0)? "green":"yellow"))} 
--> 
</style> 

 
CSS 파일 참조 추가: 