<em id="kkln5"><ruby id="kkln5"><u id="kkln5"></u></ruby></em>
<rp id="kkln5"></rp>

    <s id="kkln5"><object id="kkln5"></object></s>
  1. <dd id="kkln5"><pre id="kkln5"></pre></dd>
  2. 首頁 > 編程 > HTML > 正文

    HTML a標簽如何讓鼠標懸停變色,css控制a標簽鼠標懸停樣式詳解?

    2020-03-24 15:43:15
    字體:
    來源:轉載
    供稿:網友

    這篇文章主要的講述了關于html a標簽讓鼠標懸停變色,還有關于css控制鼠標懸停的其它樣式。里面有著詳細的實例教程,可以讓大家學的更快,接下來就讓我們一起來看這篇文章吧

    首先我們先來看看html中的a標簽鼠標懸停的時候變色:

    大家應該都知道html中的a標簽鼠標懸停的css屬性吧,沒錯,今天我們說的就是它。

    :hover:這是在之前用a標簽說css樣式的時候說過。這個鼠標懸停的功能還不少呢,今天我們就來說說html中的a標簽懸停的時候變色。這個大家應該都常用到吧。

    我們先來看看完整代碼的實例:

     !doctype html  html  head  meta charset= utf-8  title PHP  /title  style .link_1:hover{color:pink;} /style  /head  body  a href= # >

    這是一個基礎的代碼,就定義了一個link_1的名字。作用是當鼠標懸在這個文字的上方的時候,文字就會變色。

    我們來看在谷歌瀏覽器中的顯示效果:

    tuyi.png

    大家看,這是鼠標還沒放上去的效果,現在看看鼠標放上去的效果:

    tuer.png

     

    這就是鼠標移上去的結果了,是不是和我們設置的一模一樣。

    說完了鼠標懸停變色的效果了,現在我們該說說鼠標懸停還有的三種效果,我們一起來看下吧:

    :hover{font-size:60px;}鼠標移上變大

    :hover{text-decoration:underline;}鼠標移上出現下劃線

    :hover{background:#ccc;}鼠標移上去變背景色(:{background:#ccc;}鏈接出現背景色)

    和上文說的一樣,我們在鼠標懸停中可以做很多事,我們現在把它們一起展現出來,(想學更多css樣式相關的知識就到PHP css學習手冊欄目學習)現在讓我們看看代碼和效果吧

    html a標簽css控制樣式完整代碼:

     !doctype html  html  head  meta charset= utf-8  title PHP  /title  style .link_1:hover{color:pink;}.link_2:hover{font-size:60px;}.link_3:hover{background:red;} /style  /head  body  a href= # >

    如上面的我們設置了三個css樣式的代碼,第一個是變色,第二個是變大的,第三個是變背景的。

    我們先來一個個的看效果吧,第一個看過了,我們就直接看第二個:

    tusan.png

    如圖,這是一個都沒動過的樣子,現在我們把鼠標放在第二個連接上面看看效果:

    tusi.png

    這就是放上去的效果了,是不是很明顯,60像素優點大了,但是大家可以用小的像素實驗,有效果就行,現在,我們看看第三個吧:

    tuwu.png

    這第三個效果如圖所示,是把鼠標放上去的時候變成了紅色的背景,是因為我們設置了紅色,所以顯示了紅色的背景。這樣的效果還是很明顯的吧。

    好了,以上就是我們這篇文章說的html a標簽的鼠標懸停變色和鼠標懸停的其它樣式的文章了(想學更多css樣式的知識,就到PHP css學習手冊欄目學習)。有問題的可以在下方提問。

    【小編推薦】

    css怎么設置無序列表?css的列表樣式總結

    如何利用css來設置文本的背景顏色?css設置背景顏色代碼詳解

    以上就是HTML a標簽如何讓鼠標懸停變色,css控制a標簽鼠標懸停樣式詳解?的詳細內容,其它編程語言

    鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。

    發表評論 共有條評論
    用戶名: 密碼:
    驗證碼: 匿名發表
    <em id="kkln5"><ruby id="kkln5"><u id="kkln5"></u></ruby></em>
    <rp id="kkln5"></rp>

      <s id="kkln5"><object id="kkln5"></object></s>
    1. <dd id="kkln5"><pre id="kkln5"></pre></dd>