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懸停時如何改變連結a樣式的詳細內容，更多請關注TW511.COM其它相關文章！