html懸停時如何改變連結a樣式

在html中，可以使用「:hover」偽類選擇器改變標籤a懸停時的樣式，只需要給a元素設定「a:hover{屬性:屬性值}」。 “: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標籤也定義高度寬度分別為50px ;的區塊

程式碼如下：

<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懸停時如何改變連結a樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！