html懸停時(shí)改變鏈接a樣式的方法

這篇文章主要介紹了html懸停時(shí)改變鏈接a樣式的方法，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

在html中，可以使用“:hover”偽類選擇器改變標(biāo)簽a懸停時(shí)的樣式，只需要給a元素設(shè)置“a:hover{屬性:屬性值}”即可。“:hover”選擇器用于選擇鼠標(biāo)指針浮動(dòng)在上面的元素，該選擇器可用于所有元素，不只是鏈接。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

HTML中可以用CCS樣式來控制鼠標(biāo)經(jīng)過超鏈時(shí)變色?？梢晕淖肿兩部墒箤拥谋尘白兩?。

具體例子：

使文字變色，新建一個(gè)ID為abc的DIV 在里 在DIV寫入文字（任意文字）

同時(shí)建立一個(gè)空連接 代碼如下：

<div id="abc"><a href="#">文字</a></div>

同時(shí) 定義文字的CSS樣式（文字為黑色宋體） 代碼如下：

<style type="text/css">
#abc {
    font-family: "宋體";
    color: #000000;
}
</style>

再定義鼠標(biāo)經(jīng)過時(shí)文字的顏色 （文字為宋體 紅色）代碼變?yōu)椋?/p>

<style type="text/css">
#abc {
    font-family: "宋體";
    color: #000000;
}
#abc a:hover {
    font-family: "宋體";
    color: #FF0000;
}
</style>

使背景色變色，在示例1中的DIV 定義它為高度 寬度分別為50px; 背景為灰色

同時(shí)a標(biāo)簽也定義高度 寬度分別為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>

再定義鼠標(biāo)經(jīng)過時(shí)變動(dòng)的顏色（顏色為藍(lán)色） 代碼如下：

<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>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“html懸停時(shí)改變鏈接a樣式的方法”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!