超鏈接偽類
再?gòu)?fù)習(xí)一下,超鏈接的定義方式如下：
<!DOCTYPE html>
<html>
<head>
<title>這是一個(gè)標(biāo)題</title>
<meta charset="utf-8"/>
<style>
</style>
</head>
<body>
<a href="http://192.168.9.103:5000">這是一個(gè)超鏈接</a>
</body>
</html>
如果覺得下劃線不好看，可以加上：a{text-decoration: none;}
這都是之前學(xué)到過的東西，另外
如果你有注意的話，應(yīng)該能發(fā)現(xiàn)超鏈接未點(diǎn)擊時(shí)，點(diǎn)擊時(shí)和點(diǎn)擊后的顏色都是不同的。
這個(gè)顏色我們也可以自定義，方法如下：
a:link 定義超鏈接元素a 未訪問時(shí)的樣式
a:visited 定義超鏈接元素a訪問后的樣式
a:hover 定義鼠標(biāo)經(jīng)過超鏈接元素a時(shí)的樣式
a:active 定義鼠標(biāo)單機(jī)激活時(shí)的樣式
注意，這四個(gè)屬性順序固定，別定義錯(cuò)了
用法范例：
<!DOCTYPE html>
<html>
<head>
<title>這是一個(gè)標(biāo)題</title>
<meta charset="utf-8"/>
<style>
a:link{color: #005a00;}
a:visited{color: aqua;}
a:hover{color: rebeccapurple;}
a:active{color: red;}
</style>
</head>
<body>
<a href="http://192.168.9.103:5000">這是一個(gè)超鏈接</a>
</body>
</html>
效果：
未點(diǎn)擊時(shí)：
點(diǎn)擊后：
鼠標(biāo)經(jīng)過時(shí)：
鼠標(biāo)點(diǎn)擊時(shí)：
這里 :hover定義了鼠標(biāo)經(jīng)過的樣子，那其他元素也可以定義嗎？
以下是嘗試內(nèi)容：
<!DOCTYPE html>
<html>
<head>
<title>這是一個(gè)標(biāo)題</title>
<meta charset="utf-8"/>
<style>
div:hover{color: red;}
</style>
</head>
<body>
<div>
<p>這是一段話</p>
</div>
<div>
<hr/>
<img src="x.gif"/>
<hr/>
<h3>這是H3文本</h3>
<ol>
<li>標(biāo)簽一</li>
</ol>
<ul><li>標(biāo)簽二</li></ul>
</div>
</body>
</html>
效果是：hr顯示的直線沒變色，div內(nèi)的元素p等能夠隨著鼠標(biāo)經(jīng)過而變色
但是上面這個(gè)圖片卻沒反應(yīng)
單獨(dú)嘗試呢？
<!DOCTYPE html>
<html>
<head>
<title>這是一個(gè)標(biāo)題</title>
<meta charset="utf-8"/>
<style>
p:hover
{
color: red;
}
hr:hover{color: blueviolet;}
img:hover
{
color: blue;
}
</style>
</head>
<body>
<p>這是一句話</p>
<hr/>
<img src="x.gif"/>
</body>
</html>
ok,這次 hr生成的分割線也變色了，但是圖片依然沒變化，太想當(dāng)然了，給圖片加邊框呢？
<!DOCTYPE html>
<html>
<head>
<title>這是一個(gè)標(biāo)題</title>
<meta charset="utf-8"/>
<style>
p:hover
{
color: red;
}
hr:hover{color: blueviolet;}
img:hover
{
border: 5px solid red;
}
</style>
</head>
<body>
<p>這是一句話</p>
<hr/>
<img src="x.gif"/>
</body>
</html>
鼠標(biāo)移動(dòng)到圖片時(shí)：
或者像這樣：
<!DOCTYPE html>
<html>
<head>
<title>這是一個(gè)標(biāo)題</title>
<meta charset="utf-8"/>
<style>
p:hover
{
color: red;
}
hr:hover{color: blueviolet;}
img{border: 5px dashed black;}
img:hover
{
border-color: red;
}
</style>
</head>
<body>
<p>這是一句話</p>
<hr/>
<img src="x.gif">
</body>
</html>
那這樣最開始是黑色邊框，鼠標(biāo)移動(dòng)，黑框變紅框
改變背景顏色?也可行：
<!DOCTYPE html>
<html>
<head>
<title>這是一個(gè)標(biāo)題</title>
<meta charset="utf-8"/>
<style>
p:hover
{
color: red;
background-color: aqua;
}
</style>
</head>
<body>
<p>這是一句話</p>
<hr/>
<img src="x.gif">
</body>
</html>
上例子在鼠標(biāo)落到字符串時(shí)，字符串所在行背景顏色變成了指定顏色
背景，顏色，那樣式也能改吧？沒錯(cuò)，也能改
<!DOCTYPE html>
<html>
<head>
<title>這是一個(gè)標(biāo)題</title>
<meta charset="utf-8"/>
<style>
p:hover
{
color: red;
background-color: aqua;
/*text-align: center;*/
font-size: large;
font-style: oblique;
/*font-family: Arial, Helvetica, sans-serif;*/
}
</style>
</head>
<body>
<p>這是一句話</p>
<hr/>
<img src="x.gif">
</body>
</html>
這些都改了，那能改變鼠標(biāo)嗎？答案也是可以的，很多網(wǎng)頁(yè)上，鼠標(biāo)在文本輸入框，鏈接，放大縮小等等時(shí)都有不同的表現(xiàn)，我們可以進(jìn)行設(shè)定,但一般使用默認(rèn)的就可以，這里做一個(gè)了解，可以自定義我們鼠標(biāo)的樣子：
方法：cursor:取值
代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>這是一個(gè)標(biāo)題</title>
<meta charset="utf-8"/>
<style>
#a{cursor: pointer;}
#b{cursor: wait;}
</style>
</head>
<body>
<div id="a">
<h1>塊一</h1>
</div>
<div id="b">
<p>塊二</p>
</div>
</body>
</html>
類似這樣，鼠標(biāo)在移動(dòng)到設(shè)定的div塊時(shí)會(huì)改變鼠標(biāo)樣式。
還可以自定義鼠標(biāo)樣式，用 .cur后綴圖片進(jìn)行自定義
方法如下：文章來源：http://www.zghlxwxcb.cn/news/detail-800265.html
<!DOCTYPE html>
<html>
<head>
<title>這是一個(gè)標(biāo)題</title>
<meta charset="utf-8"/>
<style>
#a{cursor: url(x.gif),default;}
#b{cursor: wait;}
</style>
</head>
<body>
<div id="a">
<h1>塊一</h1>
</div>
<div id="b">
<p>塊二</p>
</div>
</body>
</html>
不過看起來我用另外格式的圖片也是可以的。文章來源地址http://www.zghlxwxcb.cn/news/detail-800265.html
到了這里，關(guān)于HTML--CSS--超鏈接樣式以及鼠標(biāo)樣式自定義的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[HTML]Web前端開發(fā)技術(shù)8（HTML5、CSS3、JavaScript ）CSS樣式屬性,withborder,italic | oblique,indent,padding,——喵喵畫網(wǎng)頁(yè)](https://imgs.yssmx.com/Uploads/2024/02/755873-1.png)
