>  기사  >  웹 프론트엔드  >  CSS를 사용하여 마우스를 위로 이동할 때 글꼴 색상을 변경하는 방법은 무엇입니까? (코드 실제 ​​테스트)

CSS를 사용하여 마우스를 위로 이동할 때 글꼴 색상을 변경하는 방법은 무엇입니까? (코드 실제 ​​테스트)

藏色散人
藏色散人원래의
2018-08-09 15:22:2015569검색

웹을 탐색할 때 텍스트의 특정 단락 위로 마우스를 이동하면 변색 효과가 나타납니다. 이는 CSS 글꼴이 변색되는 것인데, 이는 사용자의 클릭을 적극적으로 유도하기 위한 것입니다. 한편, 사용자가 실수로 다른 텍스트 단락을 클릭하는 것을 방지하기 위한 것입니다. 실제로 이 CSS 마우스 글꼴 색상 변경 효과는 달성하기가 매우 쉽습니다. CSS에 대한 약간의 지식만 있으면 조작할 수 있습니다.

알고 있는 주요 포인트는 CSS에서 마우스 호버는 HOVER로 작성되고, CSS에서는 마우스 트리거가 ACTIVE로 작성된다는 것입니다.

CSS 마우스의 글꼴 색상 변경 효과를 구현하는 구체적인 코드 예는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css字体变色测试</title>
</head>
<style>
    a {
        color:black}
    a:hover {
        color:red }
    a:active {
        color:blue}
</style>
<body>
<a>
    你过来指我试试!!!
</a>
</body>
</html>

위 코드는 직접 복사하여 로컬에서 테스트할 수 있습니다.

CSS를 사용하여 마우스를 위로 이동할 때 글꼴 색상을 변경하는 방법은 무엇입니까? (코드 실제 ​​테스트)

참고: a 뒤의 color:red는 링크 텍스트가 검은색임을 의미하고, a:hover의 color:black은 마우스를 위로 이동한 후 링크 텍스트가 빨간색임을 의미하며, a의 color:blue :active는 마우스 클릭을 의미합니다. 링크 텍스트는 파란색입니다.

그래서 이 글이 CSS 마우스의 글꼴 색상 변경 효과를 얻는 방법에 대해 모든 사람에게 도움이 되기를 바랍니다!

【관련 추천 콘텐츠】

CSS의 텍스트 글꼴 색상(CSS 색상)에 대한 자세한 설명

HTML 및 CSS의 글꼴 색상 설정 관련 요약

글꼴 색상 및 배경 색상 설정

CSS가 텍스트 색상 그라데이션을 구현하는 방법의 예


위 내용은 CSS를 사용하여 마우스를 위로 이동할 때 글꼴 색상을 변경하는 방법은 무엇입니까? (코드 실제 ​​테스트)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.