css怎么設置鼠標變背景

css怎么設置鼠標變背景

　　大家對網(wǎng)頁制作的CSS應該不陌生吧，那么，你們知道怎么設置鼠標變換背景的?下面是學習啦小編帶來的關于css設置鼠標變背景的內容，歡迎閱讀!

　　css怎么設置鼠標變背景?

　　方法一：

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

　　css部分：

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

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

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

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

　　方法二：

　　使用CSS :hover 偽類可以達到這個效果。

　　定義和用法

　　:hover 選擇器用于選擇鼠標指針浮動在上面的元素。

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

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

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

　　實例

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

　　方法三：

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

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

　　恩，一看都知道了。

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

　　這么寫道：

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

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

　　恩，其實就是這么回事了。

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

　　IE還是不行。就算是IE8也不行。恩，“永遠是藍底白字” 。