css怎么設(shè)置鼠標變背景
css怎么設(shè)置鼠標變背景
大家對網(wǎng)頁制作的CSS應(yīng)該不陌生吧,那么,你們知道怎么設(shè)置鼠標變換背景的?下面是學(xué)習(xí)啦小編帶來的關(guān)于css設(shè)置鼠標變背景的內(nèi)容,歡迎閱讀!
css怎么設(shè)置鼠標變背景?
方法一:
假設(shè)你的按鈕的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 選擇器設(shè)置指向未被訪問頁面的鏈接的樣式,:visited 選擇器用于設(shè)置指向已被訪問的頁面的鏈接,:active 選擇器用于活動鏈接。
注釋:在 CSS 定義中,:hover 必須位于 :link 和 :visited 之后(如果存在的話),這樣樣式才能生效。
實例
div{background-color:grern;}div:hover{ background-color:yellow;}/*當(dāng)鼠標懸浮到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也不行。恩,“永遠是藍底白字” 。