css鼠標懸停偽類

css鼠標懸停偽類 :hover 使用方式如下

網(wǎng)站建設哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、重慶小程序開發(fā)公司、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了敘州免費建站歡迎大家使用！

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

.test: hover {

color: orange;

font-weight: bold;

}

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

鼠標懸停偽類在手機端是看不到效果的，因為手機端是觸屏的

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;

? ? ? ? /* 轉(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設置鼠標單擊后的樣式

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

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

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

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

css里的a：hover從h除了text-decoration屬性還有什么屬性？

a:hover是css中的選擇器，用于選擇鼠標指針浮動在上面的元素。所以a:hover可用于設置當鼠標懸停在超鏈接之上時超鏈接的樣式。示例如下：

在Html代碼中給出一個超鏈接

a href="#"我是一個超鏈接。/a

設置鼠標懸停的css樣式

a:hover{

color:red; /*設置顏色為紅色*/

font-size:20px; /*字體變大*/

text-decoration: none; /*去掉下劃線*/}

很多的，基本上CSS樣式都可以有在里面。

可以關注衛(wèi)星公眾號(web開發(fā)分享交流)，一起交流分享web開發(fā)技術,還有2054G開發(fā)資料!

css里鼠標懸停變色怎么弄

1、首先新建一個html文件，命名為test.html，在test.html文件內(nèi)，使用table標簽創(chuàng)建一個表格，用于測試。

2、在test.html文件內(nèi)，設置table標簽的class屬性為mytable，同時設置邊框為1px。

3、接著在css標簽內(nèi)，通過class設置表格的樣式，定義它的寬度為300px,高度為200px。

4、在css標簽內(nèi)，通過td元素名稱和“:hover”選擇器定義當鼠標指向單元格時，改變單元格的背景顏色，設置為紅色。

5、最后在瀏覽器打開test.html文件，鼠標經(jīng)過之后，即可變色。