css怎么設(shè)置鼠標(biāo)變背景

時(shí)間：2016-05-10 09:35:43 捷鋒774由分享

　　大家對(duì)網(wǎng)頁制作的CSS應(yīng)該不陌生吧，那么，你們知道怎么設(shè)置鼠標(biāo)變換背景的?下面是學(xué)習(xí)啦小編帶來的關(guān)于css設(shè)置鼠標(biāo)變背景的內(nèi)容，歡迎閱讀!

　　css怎么設(shè)置鼠標(biāo)變背景?

　　方法一：

　　假設(shè)你的按鈕的class是btn，兩個(gè)背景圖片分別是bg1.jpg和bg2.jpg，那么可以這樣來做

　　css部分：

　　.btn {background:url(bg1.jpg);}

　　.btn:hover {background:url(bg2.jpg);}

　　html部分就很簡單了，給input加個(gè)樣式就行

　　使用這個(gè)樣式時(shí)別忘了先把input的默認(rèn)樣式，那些padding、margin、border什么的都清零，然后再定義一下寬高，這樣出來的視覺效果會(huì)好些。

　　方法二：

　　使用CSS :hover 偽類可以達(dá)到這個(gè)效果。

　　定義和用法

　　:hover 選擇器用于選擇鼠標(biāo)指針浮動(dòng)在上面的元素。

　　提示：:hover 選擇器可用于所有元素，不只是鏈接。

　　提示：:link 選擇器設(shè)置指向未被訪問頁面的鏈接的樣式，:visited 選擇器用于設(shè)置指向已被訪問的頁面的鏈接，:active 選擇器用于活動(dòng)鏈接。

　　注釋：在 CSS 定義中，:hover 必須位于 :link 和 :visited 之后(如果存在的話)，這樣樣式才能生效。

　　實(shí)例

　　div{background-color:grern;}div:hover{ background-color:yellow;}/*當(dāng)鼠標(biāo)懸浮到div上方是，將背景顏色更改為黃色*/

　　方法三：

　　于是仔細(xì)研究了一下，發(fā)現(xiàn)了這么句話：

　　*::-moz-selection {color:#fc5; background-color:#0f581a;}

　　恩，一看都知道了。

　　又在 google 中發(fā)現(xiàn)了一片文章：改變鼠標(biāo)選中時(shí)文字的顏色

　　這么寫道：

　　::-moz-selection{background:#93C; color:#FCF;}

　　::selection {background:#93C; color:#FCF;}

　　恩，其實(shí)就是這么回事了。

　　這樣，就可以在 firefox 和 google chrome 中實(shí)現(xiàn)改變鼠標(biāo)選中時(shí)的顏色和背景色了。

　　IE還是不行。就算是IE8也不行。恩，“永遠(yuǎn)是藍(lán)底白字” 。