CSS中的a:hover表示什么

a：hover表示當鼠標選定在a標簽上時a標簽的樣式變化。

創新互聯專注骨干網絡服務器租用10余年，服務更有保障！服務器租用，德陽服務器托管 成都服務器租用，成都服務器托管，骨干網絡帶寬，享受低延遲，高速訪問。靈活、實現低成本的共享或公網數據中心高速帶寬的專屬高性能服務器。

這是css中偽類的使用格式。

偽類（Pseudo classes）是選擇符的螺栓，用來指定一個或者與其相關的選擇符的狀態。它們的形式是selector:pseudo class { property: value; }，簡單地用一個半角英文冒號（:）來隔開選擇符和偽類。CSS很多的建議并沒有得到瀏覽器的支持，但有四個可以安全用在超鏈接上的偽類：

:link用在未訪問的連接上。

:visited用在已經訪問過的連接上。

:active用于獲得焦點（比如，被點擊）的連接上。

:hover?用于鼠標光標置于其上的連接。

擴展資料：

css的語言特點：

1、多頁面應用

CSS樣式表可以單獨存放在一個CSS文件中，這樣我們就可以在多個頁面中使用同一個CSS樣式表。CSS樣式表理論上不屬于任何頁面文件，在任何頁面文件中都可以將其引用。這樣就可以實現多個頁面風格的統一。

2、層疊

簡單的說，層疊就是對一個元素多次設置同一個樣式，這將使用最后一次設置的屬性值。例如對一個站點中的多個頁面使用了同一套CSS樣式表，而某些頁面中的某些元素想使用其他樣式，就可以針對這些樣式單獨定義一個樣式表應用到頁面中。這些后來定義的樣式將對前面的樣式設置進行重寫，在瀏覽器中看到的將是最后面設置的樣式效果。

3、頁面壓縮

在使用HTML定義頁面效果的網站中，往往需要大量或重復的表格和font元素形成各種規格的文字樣式，這樣做的后果就是會產生大量的HTML標簽，從而使頁面文件的大小增加。而將樣式的聲明單獨放到CSS樣式表中，可以大大的減小頁面的體積，這樣在加載頁面時使用的時間也會大大的減少。另外，CSS樣式表的復用更大程度的縮減了頁面的體積，減少下載的時間。

參考資料：百度百科——偽類

百度百科——css

在CSS中如何設置一個按鈕鼠標劃過變顏色。

需要準備的材料分別有：電腦、瀏覽器、html編輯器。

1、首先，打開html編輯器，新建html文件，例如：index.html。

2、在index.html中的style標簽中，輸入css代碼：button {background-color: #00a7d0}

button:hover {background-color: #ff7701}。

3、瀏覽器運行index.html頁面，此時顯示出了藍色背景顏色的按鈕。

4、將鼠標移入按鈕，此時按鈕的背景顏色變成了橙色。

HTML+CSS制作鼠標懸停效果

!DOCTYPE html

html

head

meta charset="UTF-8"

title鼠標懸停效果/title

style type="text/css"

? ? *{

? ? ? ? margin: 0;

? ? ? ? padding: 0;

? ? }

? ? body{

? ? ? ? background-color: #000;

? ? }

? ? a{

? ? ? ? width: 200px;

? ? ? ? height: 50px;

? ? ? ? display: block;

? ? ? ? text-align: center;

? ? ? ? line-height: 50px;

? ? ? ? text-decoration: none;

? ? ? ? position: absolute;

? ? ? ? top: 50%;

? ? ? ? left: 50%;

? ? ? ? transform: translate(-50%,-50%);

? ? ? ? font-size: 24px;

? ? ? ? font-weight: bold;

? ? ? ? color: white;

? ? ? ? border: 1px solid white;

? ? ? ? overflow: hidden;

? ? }

? ? a::before{

? ? ? ? content: "";

? ? ? ? position: absolute;

? ? ? ? top: 0;

? ? ? ? left: -100%;

? ? ? ? width: 100%;

? ? ? ? height: 100%;

? ? ? ? background-image: linear-gradient(60deg,transparent,rgba(146,148,248,.4),transparent);

? ? ? ? transition: all 0.5s;

? ? }

? ? a:hover::before{

? ? ? ? left: 100%;

? ? }

? ? a:hover{

? ? ? ? box-shadow: 0 2px 10px 8px rgba(146,148,248,.4);

? ? }

/style

/head

body

a href="#"鼠標懸停效果/a

/body

/html

CSS+HTML懸停下劃線效果

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

meta name="viewport" content="width=device-width, initial-scale=1.0"

meta http-equiv="X-UA-Compatible" content="ie=edge"

titleDocument/title

style

? ? body {

? ? ? ? display: flex;

? ? ? ? height: 100vh;

? ? ? ? justify-content: center;

? ? ? ? align-items: center;

? ? }

? ? ul {

? ? ? ? padding: 0;

? ? ? ? margin: 0;

? ? ? ? list-style-type: none;

? ? }

? ? ul li{

? ? ? ? padding: 5px 0;

? ? }

? ? ul li a {

? ? ? ? position: relative;

? ? ? ? display: inline-block;

? ? ? ? text-decoration: none;

? ? ? ? color: #3a3a3a;

? ? ? ? /* 轉大寫 */

? ? ? ? text-transform: uppercase;

? ? ? ? padding: 4px 0;

? ? ? ? transition: 0.5s;

? ? ? ? font-weight: bold;

? ? }

? ? ul li a::after {

? ? ? ? position: absolute;

? ? ? ? content: "";

? ? ? ? width: 100%;

? ? ? ? height: 3px;

? ? ? ? top: 100%;

? ? ? ? left: 0;

? ? ? ? background: #347cdb;

? ? ? ? transition: transform 0.5s;

? ? ? ? transform: scaleX(0);

? ? ? ? transform-origin: right;

? ? }

? ? ul li a:hover {

? ? ? ? color: #585858;

? ? ? ? text-shadow: 0 0 10px #ccc;

? ? }

? ? ul li a:hover::after {

? ? ? ? transform: scaleX(1);

? ? ? ? transform-origin: left;

? ? }

/style

/head

body

ul

? ? lia href="#"home/a/li

? ? lia href="#"archives/a/li

? ? lia href="#"tags/a/li

? ? lia href="#"categories/a/li

? ? lia href="#"about/a/li

/ul

/body

/html

HTML5+CSS3小實例：鼠標懸停發光按鈕

HTML5+CSS3做一組鼠標懸停發光的按鈕，鼠標懸停，按鈕邊框延展開來，首尾相連時填充按鈕，過程伴隨發光、倒影效果，并通過hue-rotate實現每個按鈕不同顏色。

效果：

源碼：