資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚學
法律使用 CSS 樣式不同狀態的連結
透過使用 CSS 偽類選擇器（active、hover、link 和 visited）可以為不同狀態的連結設定樣式。順序如下，才能正常使用這些選擇器：link、visited、hover、active。
語法
CSS text-indent 屬性的語法如下 −
a:(pseudo-selector) {
/*declarations*/
}
以下是連結的一些主要偽類 −
:active = 選擇啟用的連結
:hover = 滑鼠懸停時選擇連結
:hover = 滑鼠懸停時選擇連結
:valid = 選擇值的有效元素
:visited = 選擇所有已訪問的連結
以下示例說明為連結的不同狀態設定樣式 −
為連結的狀態設定樣式
使用偽類在此處設定連結的不同狀態 −
a:link {
color: navy;
text-decoration: none;
}
a:visited {
color: yellowgreen;
}
a:hover {
color: orange;
text-decoration: wavy underline;
}
a:active {
color: red;
}
示例
讓我們看下示例 −
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin-left: 20px;
display: flex;
float: left;
}
a:link {
color: navy;
text-decoration: none;
}
a:visited {
color: yellowgreen;
}
a:hover {
color: orange;
text-decoration: wavy underline;
}
a:active {
color: red;
}
</style>
</head>
<body>
<div>
<div>
<a href="#">Demo link </a>
</div>
<div>
<a href="">Demo visited link</a>
</div>
</div>
</body>
</html>
為連結的狀態設定樣式並更改陰影
連結狀態用於在啟用連結和其他連結時更改元素的陰影 −
a:hover {
color: orange;
font-size: 150%;
font-weight: bold;
box-shadow: 0 0 5px 1px grey;
}
a:active {
color: red;
box-shadow: inset 0 0 15px red;
}
示例
讓我們看下示例 −
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
float: left;
}
a {
margin: 20px;
padding: 10px;
border: 2px solid black;
text-shadow: -1px 0px black, 0px -1px black, 0px 1px black, 1px 0px black;
font-size: 1.1em;
}
a:link {
text-decoration: none;
}
a:visited {
color: blueviolet;
}
a:hover {
color: orange;
font-size: 150%;
font-weight: bold;
box-shadow: 0 0 5px 1px grey;
}
a:active {
color: red;
box-shadow: inset 0 0 15px red;
}
</style>
</head>
<body>
<div>
<a href="#">Kapow!</a>
<a href="">Dishoom</a>
</div>
</body>
</html>
更新於： 27-12-2023
179 次瀏覽
廣告