CSS를 사용하여 마우스를 위로 이동할 때 글꼴 색상을 변경하는 방법은 무엇입니까? (코드 실제 테스트)
- 藏色散人원래의
- 2018-08-09 15:22:2015577검색
웹을 탐색할 때 텍스트의 특정 단락 위로 마우스를 이동하면 변색 효과가 나타납니다. 이는 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>위 코드는 직접 복사하여 로컬에서 테스트할 수 있습니다.
참고: a 뒤의 color:red는 링크 텍스트가 검은색임을 의미하고, a:hover의 color:black은 마우스를 위로 이동한 후 링크 텍스트가 빨간색임을 의미하며, a의 color:blue :active는 마우스 클릭을 의미합니다. 링크 텍스트는 파란색입니다.
그래서 이 글이 CSS 마우스의 글꼴 색상 변경 효과를 얻는 방법에 대해 모든 사람에게 도움이 되기를 바랍니다!
【관련 추천 콘텐츠】
CSS의 텍스트 글꼴 색상(CSS 색상)에 대한 자세한 설명
위 내용은 CSS를 사용하여 마우스를 위로 이동할 때 글꼴 색상을 변경하는 방법은 무엇입니까? (코드 실제 테스트)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!