지역 사회
배우다
도구 라이브러리
AI 도구
여가
찾다
한국어
집 > 웹 프론트엔드 > CSS 튜토리얼 > CSS는 마우스가 이미지 위로 움직일 때 이미지가 변경되도록 어떻게 제어합니까?

CSS는 마우스가 이미지 위로 움직일 때 이미지가 변경되도록 어떻게 제어합니까?

藏色散人
풀어 주다： 2018-08-06 16:42:15
원래의
2459명이 탐색했습니다.

마우스를 사용하여 웹을 탐색할 때 우리는 항상 그림의 갑작스러운 변화에 매료되어 사용자 경험을 크게 향상시키고 효율성을 높입니다. 그래서 이번 글에서는 주로 CSS를 사용하여 마우스가 지나갔을 때 이미지 변경을 제어하는 ​​방법을 소개합니다.

마우스 포인터를 위로 이동할 때 이미지 변환을 제어하는 ​​CSS의 구체적인 코드 예는 다음과 같습니다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<style type="text/css">

    .demo {

        width:500px;

        height:400px;

        text-decoration:none;

        display:block;

        background-image:url(1.png);

        background-position:0px 0;

        background-repeat: no-repeat;

    }

    .demo:hover,.demo:active {

        background-position:0 0;

        background-image: url(2.png);

    }</style>

</head>

<body>

<a href="http://www.php.cn" class="demo"> </a>

</body>

로그인 후 복사

CSS는 마우스가 이미지 위로 움직일 때 이미지가 변경되도록 어떻게 제어합니까?

참고:

CSS :hover 선택기는 마우스가 있는 요소를 선택하는 데 사용됩니다. 포인터는 부동형이며 Link뿐만 아니라 모든 요소에 사용할 수 있습니다.

【관련 글 추천】

CSS3의 마우스가 그림 안으로 이동할 때의 동적 프롬프트 효과

마우스 업 아이콘 회전 효과를 구현하는 CSS 방법에 대한 자세한 설명

JS 및 CSS3 이미지 구현 예 반응형 마우스 움직임 확대 효과




위 내용은 CSS는 마우스가 이미지 위로 움직일 때 이미지가 변경되도록 어떻게 제어합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
css控制鼠标划过时变换图片
이전 기사：한 줄의 텍스트 위로 스크롤하는 효과를 얻는 방법(코드 첨부) 다음 기사：CSS에서 테이블을 사용하는 두 가지 방법(예)
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
url-rewrite - nginx 디렉토리 이후의 슬래시 문제
에서 1970-01-01 08:00:00
0
0
0
개발 환경 서버인 Nginx는 정적 파일 캐시를 지울 수 없습니다.
에서 1970-01-01 08:00:00
0
0
0
Nginx에서 502 문제를 빠르게 찾는 방법
에서 1970-01-01 08:00:00
0
0
0
이러한 요구 사항을 달성하기 위해 nginx를 사용하는 방법은 무엇입니까?
에서 1970-01-01 08:00:00
0
0
0
504 - nginx + fastcgi + Django 자주 504
에서 1970-01-01 08:00:00
0
0
0
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿