>  기사  >  웹 프론트엔드  >  이미지에 마우스를 올리면 글꼴을 표시하는 방법은 무엇입니까?

이미지에 마우스를 올리면 글꼴을 표시하는 방법은 무엇입니까?

WBOY
WBOY앞으로
2023-09-13 08:09:022899검색

이미지에 마우스를 올리면 글꼴을 표시하는 방법은 무엇입니까?

이 글에서 수행할 작업은 이미지 위에 마우스를 올렸을 때 글꼴을 표시하는 방법입니다. 이 기사를 자세히 살펴보고 HTML의 hover 및 mouseover에 대해 간단히 살펴보겠습니다.

HTML의 onmouseover 이벤트는 마우스 포인터가 요소에 닿을 때 트리거됩니다. 마우스 포인터가 요소를 벗어나면 onmouseout이라는 이벤트가 발생합니다.

:hover CSS 의사 클래스는 사용자가 포인팅 장치를 사용하여 요소와 상호 작용할 때 일치하지만 항상 활성화되는 것은 아닙니다. 일반적으로 사용자가 요소(마우스 포인터) 위에 커서를 올리면 활성화됩니다.

문법

다음은 hover -

의 구문입니다. 으아아아

이미지 위로 마우스를 가져갈 때 표시되는 글꼴을 더 잘 이해하려면 다음 예를 살펴보겠습니다.

아래 예에서는 이미지 위에 마우스를 올리면 글꼴이 표시되도록 설정했습니다.

으아아아

스크립트가 실행되면 웹페이지에 이미지를 표시하는 출력이 생성됩니다. 사용자가 이미지 위로 마우스를 가져가면 페이지에 해당 특정 이미지에 대한 텍스트 설명이 표시됩니다.

아래 예에서는 이미지 위에 마우스를 올렸을 때 글꼴이 나타나도록 하고 이미지 전체를 덮도록 했습니다.

으아아아

위 스크립트를 실행하면 웹페이지에 이미지를 출력하는 출력창이 뜹니다. 사용자가 이미지 위로 마우스를 이동하면 전체 이미지를 덮는 텍스트가 표시됩니다.

다음 코드를 실행하고 이미지 위에 마우스를 올렸을 때 글꼴이 어떻게 나타나는지 관찰하세요.

으아아아

스크립트가 실행되면 출력창이 팝업되어 웹페이지에 이미지가 원으로 표시됩니다. 사용자가 이미지 위로 마우스를 가져가면 텍스트가 표시됩니다.

위 내용은 이미지에 마우스를 올리면 글꼴을 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제