CSS에서 그림을 변경하기 위해 마우스 호버를 구현하는 방법
- WBOY원래의
- 2021-11-18 09:31:0611460검색
CSS에서는 ":hover" 의사 클래스 선택기와 배경 속성을 사용하여 마우스를 가리키면 이미지가 변경되는 효과를 얻을 수 있습니다. 구문은 "picture element:hover{배경:url(경로)입니다. 마우스를 올린 후 이미지를 표시합니다);}" .
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
css 마우스를 올리면 이미지가 변경됩니다
CSS에서 :hover 의사 클래스를 사용하면 이 효과를 얻을 수 있습니다. :hover 선택기는 마우스 포인터가 떠 있는 요소를 선택하는 데 사용됩니다.
팁: :hover 선택기는 링크뿐만 아니라 모든 요소에 사용할 수 있습니다.
팁: :link 선택기는 방문하지 않은 페이지를 가리키는 링크 스타일을 설정하고, :visited 선택기는 방문한 페이지에 대한 링크를 설정하는 데 사용되며, :active 선택기는 활성 링크에 사용됩니다.
참고: 스타일을 적용하려면 CSS 정의에서 :hover를 :link 및 :visited(있는 경우) 뒤에 배치해야 합니다.
예제를 살펴보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style type="text/css">
div{
width:350px;
height:250px;
background:url(1118.01.png);
}
div:hover{
background:url(1118.02.png);
}/*鼠标经过*/
</style>
<body>
<div> </div>
</body>
</html>사진 위에 마우스를 올려 놓지 않았을 때 출력 결과는 다음과 같습니다.
마우스를 사진 위에 올려 놓았을 때 출력 결과는 다음과 같습니다. :
이렇게 하면 이미지 변경을 위한 마우스 오버가 완료됩니다.
더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !
위 내용은 CSS에서 그림을 변경하기 위해 마우스 호버를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!