여러 유형의 마우스가 CSS 이벤트를 트리거합니다. 설명: onMouseDown은 마우스를 눌렀을 때 트리거됩니다. onMouseOver는 마우스가 그 위를 지나갈 때 트리거됩니다. onMouseUp은 마우스를 눌렀다가 놓을 때 트리거됩니다. onMouseOut은 마우스가 밖으로 움직일 때 트리거됩니다. onMouseMove는 마우스가 움직일 때 트리거됩니다. 코드 복사 코드는 다음과 같습니다. CSS 마우스 응답 이벤트 <br>.Off{ 배경색: #00FF66;} <br>.up{배경색: #FF0000; } <br></style> ; <BR><body> <br><ul class=Off onMouseOut="this.className='Off'" onMouseOver="this.className ='Up'"> <br><h4>마우스가 밖으로 움직일 때 마우스 응답 이벤트가 CSS를 전환합니다</h4> <br><li>onMouseDown은 마우스를 누를 때 트리거됩니다<br><li>onMouseOver 마우스가 지나갈 때 트리거<br><li>onMouseUp 마우스를 눌렀다가 놓을 때 트리거됩니다<br><li>onMouseOut 마우스가 밖으로 움직일 때 트리거<br><li>onMouseMove 마우스가 움직일 때 트리거됩니다.</ li> <br></ul> <br></html> <br><br> <br> </div> <br><div class="codetitle"> 🎜><span><a style="CURSOR: pointer" data="27254" class="copybut" id="copybut27254" onclick="doCopy('code27254')"> 코드는 다음과 같습니다.<u></u> </a><span style="color: red;">마우스가 테이블 위로 지나갈 때 색상 스타일을 변경합니다:<br> ;</span> </span> </div> <div class="codebody" id="code27254"> <br><br> </div> <br>코드 복사<div class="codetitle"> <span><a style="CURSOR: pointer" data="5228" class="copybut" id="copybut5228" onclick="doCopy('code5228')"> 코드는 다음과 같습니다.<u></u> </a><style> </span>table { background-color:#000000; 커서:손; 너비:100%; } </div>td { <div class="codebody" id="code5228">/*onmouseover 이벤트 설정*/ <br>onmouseover: 표현식 (onmouseover=function (){this.style.borderColor ='blue';this.style.color= 'red';this.style.BackgroundColor ='yellow'}) <br>/*onmouseout 이벤트 설정*/ <br>onmouseout: 표현식(onmouseout=function (){this.style.borderColor='';this.style.color='';this.style.BackgroundColor =''}) <br>배경색:#ffffff ; <br>} <br> 테이블의 다른 모든 행의 색상 변경 제어: 간단한 적용: 🎜><!-- <BR>tr { background-color:expression((this.sectionRowIndex%2==0)?" #E1F1F1":"#F0F0F0")} <BR>--> 고급 적용: 각 셀의 색상이 변경됩니다<br><style type="text/css"> <br><!- - <BR>tr {Background-color:expression((this.sectionRowIndex%2==0 )?"빨간색":"파란색")} <BR>td {배경색:표현식((this.cellIndex%2= =0)?"":((this.parentElement.sectionRowIndex%2==0)? "green":"yellow"))} <BR>--> <br> CSS 파일 참조 추가: 코드 복사 코드는 다음과 같습니다. < link id="cssStyle" rel="stylesheet" type="text/css" href="../style.css" />
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
