CSS는 마우스가 이미지 위로 움직일 때 이미지가 변경되도록 어떻게 제어합니까?-CSS 튜토리얼-php.cn

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

藏色散人

풀어 주다： 2018-08-06 16:42:15

원래의

2330명이 탐색했습니다.

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

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

<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는 마우스가 이미지 위로 움직일 때 이미지가 변경되도록 어떻게 제어합니까?