CSS에서는 ":hover" 선택기와 불투명도 속성을 사용하여 마우스가 div 요소로 이동할 때 해당 요소를 표시하거나 숨길 수 있습니다. 구문은 "div:hover{opacity:0}" 또는 "div:hover"입니다. {불투명도:1}".
이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
css3 div로 마우스 이동 시 div 표시 및 숨기기 효과 구현 방법
1 div를 표시하려면 div로 마우스를 이동하세요.
:hover 선택기와 불투명도를 사용할 수 있습니다. div를 표시하기 위해 div에 마우스를 이동하는 효과를 구현하는 속성은 다음과 같습니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> div{ width: 380px; height: 250px; background-image: url(1118.02.png); opacity: 0; } div:hover{ width: 380px; height: 250px; background-image: url(1118.02.png); opacity: 1; } </style> </head> <body> <div>鼠标移动到div上</div> </body> </html>
출력 결과:
2 div를 숨기려면 마우스를 div로 이동하세요. 여전히 :hover 선택기와 불투명도 속성을 사용하여 div를 표시하기 위해 마우스를 div로 이동하는 효과를 얻습니다. 예는 다음과 같습니다:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> div{ width: 380px; height: 250px; background-image: url(1118.02.png); } div:hover{ opacity: 0; } </style> </head> <body> <div>鼠标移动到div上</div> </body> </html>
출력 결과:
(동영상 공유 학습:
css 동영상 튜토리얼위 내용은 CSS3에서 마우스를 div로 이동할 때 div를 표시하고 숨기는 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!