html懸停時改變鏈接a樣式的方法

這篇文章主要介紹了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樣式的方法”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!