HTML에서 마우스를 가져갈 때 링크 스타일을 변경하는 방법

HTML에서는 ":hover" 의사 클래스 선택기를 사용하여 a 요소에 "a:hover{attribute:attribute value}"를 설정하기만 하면 됩니다. ":hover" 선택기는 마우스 포인터가 떠 있는 요소를 선택한 다음 해당 요소에 해당 스타일을 추가하는 데 사용됩니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

HTML에서 CCS 스타일을 사용하여 마우스가 하이퍼링크 위로 지나갈 때 색상 변경을 제어할 수 있습니다. 레이어의 텍스트 색상이나 배경 색상을 변경할 수 있습니다.

구체적인 예:

텍스트 색상을 변경하고, ID가 abc인 새 DIV를 생성하고 DIV에 텍스트(모든 텍스트)를 작성합니다.

동시에 다음과 같이 빈 연결 코드를 생성합니다.

<div id="abc"><a href="#">文字</a></div>

동시에 텍스트의 CSS 스타일을 정의합니다(검은색 노래 글꼴의 경우 텍스트) 코드는 다음과 같습니다.

<style type="text/css">
#abc {
    font-family: "宋体";
    color: #000000;
}
</style>

그런 다음 마우스가 지나갈 때 텍스트의 색상을 정의합니다(텍스트는 노래 글꼴 빨간색). 코드는 다음과 같습니다. :

<style type="text/css">
#abc {
    font-family: "宋体";
    color: #000000;
}
#abc a:hover {
    font-family: "宋体";
    color: #FF0000;
}
</style>

예제 1의 DIV에서 높이와 너비가 각각 50px로 정의합니다. 배경은 회색입니다

동시에 a 태그도 높이가 있는 블록을 정의합니다.

코드는 다음과 같습니다.

<style type="text/css">
#abc {
    font-family: "宋体";
    color: #000000;
    background-color: #CCCCCC;
    height: 50px;
    width: 50px;
}
#abc a:hover {
    font-family: "宋体";
    color: #FF0000;
}
#abc a {
    background-color: #CCCCCC;
    display: block;
    height: 50px;
    width: 50px;
}
</style>

그런 다음 마우스가 지나갈 때 변경되는 색상을 정의합니다(색상은 파란색). 코드는 다음과 같습니다.

<style type="text/css">
#abc {
    font-family: "宋体";
    color: #000000;
    background-color: #CCCCCC;
    height: 50px;
    width: 50px;
}
#abc a:hover {
    font-family: "宋体";
    color: #FF0000;
    background-color: #0066FF;
}
#abc a {
    background-color: #CCCCCC;
    display: block;
    height: 50px;
    width: 50px;
}
</style>

추천 학습: html 비디오 튜토리얼

위 내용은 HTML에서 마우스를 가져갈 때 링크 스타일을 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!