HTML+CSS制作鼠標(biāo)懸停效果

!DOCTYPE html

成都創(chuàng)新互聯(lián)專注于包河企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),商城開發(fā)。包河網(wǎng)站建設(shè)公司,為包河等地區(qū)提供建站服務(wù)。全流程專業(yè)公司，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

html

head

meta charset="UTF-8"

title鼠標(biāo)懸停效果/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="#"鼠標(biāo)懸停效果/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;

? ? ? ? /* 轉(zhuǎn)大寫 */

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

css鼠標(biāo)懸停偽類

css鼠標(biāo)懸停偽類 :hover 使用方式如下

div class="test"則是測試div/div

.test: hover {

color: orange;

font-weight: bold;

}

當(dāng)鼠標(biāo)懸停在 div test 上時(shí)，test里面的文字會加粗，顏色變?yōu)殚偕?/p>

鼠標(biāo)懸停偽類在手機(jī)端是看不到效果的，因?yàn)槭謾C(jī)端是觸屏的

css里鼠標(biāo)懸停變色怎么設(shè)置？

css中懸停改變樣式的最好方法是用偽類選擇器 div:hover{}。css代碼示例如下：

div{ width:100px; height:200px; background:#000;}

div:hover{ background:#fff;}

這是一個(gè)修改背景顏色的示例，偽類里可以修改跟多的樣式，寬度，高度或者字體大小，字體顏色都是可以修改的。

如何用它CSS設(shè)置鼠標(biāo)單擊后的樣式

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

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

2、在index.html中的style標(biāo)簽中，輸入css代碼：a:visited {color: blueviolet;}。

3、瀏覽器運(yùn)行index.html頁面，此時(shí)超鏈接文本單擊后的樣式被設(shè)置了文字紫色顏色。