마우스가 들어오고 나갈 때 CSS를 사용하여 다른 이미지를 덮는 방법은 무엇입니까? (예)-CSS 튜토리얼-php.cn

마우스가 들어오고 나갈 때 CSS를 사용하여 다른 이미지를 덮는 방법은 무엇입니까? (예)

藏色散人

풀어 주다： 2018-08-10 10:30:54

원래의

6176명이 탐색했습니다.

웹사이트를 디자인할 때 마우스가 특정 그림 안팎으로 움직일 때 자동으로 다른 그림을 덮어야 하는 경우 어떻게 해야 할까요? 사실 CSS 코드를 조금 아는 친구들은 이것이 매우 간단한 작업이라는 것을 알고 있습니다. 이 글의 소개를 통해 초보자라도 지식 포인트를 쉽게 이해할 수 있습니다. 그래서 오늘은 CSS 마우스 패스 스타일로 특정 그림을 가리는 특수효과 기능에 대해 자세히 소개해드리겠습니다.

Css 마우스 이동 특정 코드 예:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css鼠标经过样式测试</title>
</head>
<body>
<div class="div">
    <div class="img1 img">
        <img  src="1.png" alt="마우스가 들어오고 나갈 때 CSS를 사용하여 다른 이미지를 덮는 방법은 무엇입니까? (예)" >
    </div>
    <div class="img2 img">
        <img  src="2.png" alt="마우스가 들어오고 나갈 때 CSS를 사용하여 다른 이미지를 덮는 방법은 무엇입니까? (예)" >
    </div>
</div>
<style>
    .div{position:relative; width:800px; margin:auto;}
    .img{position:absolute; z-index:0;}
    .img2{left:150px; top:100px;}
    .img1:hover{z-index:1;}
</style>
</body>
</html>

로그인 후 복사

위 효과는 다음과 같습니다.

1 방금 열린 페이지에는 다음이 표시됩니다.

마우스가 들어오고 나갈 때 CSS를 사용하여 다른 이미지를 덮는 방법은 무엇입니까? (예)

2. in display 그것은 또 다른 것을 다루고 있습니다:

마우스가 들어오고 나갈 때 CSS를 사용하여 다른 이미지를 덮는 방법은 무엇입니까? (예)

사실 이 글의 핵심은 hover 의사 클래스를 사용하는 것입니다. 여기에서는 css:hover의 정의와 사용법에 대해서도 간략하게 소개하겠습니다.

:hover 의사 클래스는 마우스를 요소 위로 이동할 때 이 요소에 특별한 스타일을 추가합니다. 이 의사 클래스는 "호버 상태"에 있는 요소를 적용합니다. 호버는 사용자가 요소를 표시하지만 활성화하지 않는 경우로 정의됩니다. 이에 대한 가장 일반적인 예는 HTML 문서의 하이퍼링크 범위 내에서 마우스 포인터를 움직이는 것입니다. 이론적으로는 다른 요소에 마우스를 올릴 수 있지만 CSS는 어떤 요소를 정의하지 않습니다.

참고: 모든 주요 브라우저는 :hover 의사 클래스를 지원합니다.

이 기사가 도움이 필요한 친구들에게 도움이 되기를 바랍니다!

위 내용은 마우스가 들어오고 나갈 때 CSS를 사용하여 다른 이미지를 덮는 방법은 무엇입니까? (예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!