css怎麼設定滑鼠變背景,行內css樣式怎麼設定滑鼠滑過的時候背景變色的效果??

2021-05-05 01:51:21 字數 4252 閱讀 2611

1樓:愛染年

css定義滑鼠滑過導航選單,背景可以是css定義的純色,也可以是豐富色彩圖案的**,文字則是實實在在的,但它無法做到又酷又炫,但其優點是更利於搜尋優化和cms中使用。

來看一個簡單例項,就是給a:hover(滑鼠懸停)加一個背景顏色,如下圖:

試下,滑鼠移動到「導航選單」文字上就可以看見黃色背景,移開滑鼠又沒有了,但是隻有文字下面才有背景,不是想要的效果,選擇顯示方式為塊,如圖:

這樣是不是就可以顯示出一大塊來了,但不規範,而且滑鼠只有移動到文字上才會觸發背景切換,可以給a標籤一個寬高定義來實現,然後再去掉專案符號,定義li元素的寬高,文字縱橫居中,這樣是不是看上去就更美觀了呢,如圖:

當然,這只是個很簡單的例項,以便製作出更完美的導航選單來:

li標籤的定義

行高與文字顏色設定

行高主要是相對於li元素來說,如果li元素的高度為30畫素,那麼設定30畫素的行高文字正好橫向居中。

背景設定

這裡可設定也可以不用設定,關鍵在於文字是否帶上超鏈,如果帶超鏈,這裡所設定的背景就無法看到,所以可以不用設定;但是如果文字沒有帶超鏈,這裡的背景就有必要設定。

文字對齊和顯示方式

文字對齊選擇居中,也就是縱向居中,在導航選單中橫向和縱向文字都居中比較好看,顯示方式最好選「塊」,這樣更利於視覺。

寬和高設定

寬度和高度的設定是讓多個li元素的塊顯示更平均,更好看。

另外,假如編輯的導航選單是橫向導航,還需要將浮動設定成為左對齊,要是縱向導航就不需要設定了。

li a標籤的設定

文字顏色和連結時的顯示樣式

文字顏色可以按自己喜歡的方式去選擇,修飾我們選擇無,因為超鏈在預設情況下是帶下劃線的,選擇無也就沒有下劃線了。

背景設定

這裡的背景是文字帶上超鏈時的背景,可以是**。

顯示方式

顯示方式我們也選擇塊,如圖不選擇塊,那麼背景只會顯示文字下面那一小塊,其他的都是預設的顏色。

寬高度與浮動設定

設定寬度和高度的好處是滑鼠只要移到li元素塊上就可以觸發,如果沒選,滑鼠的觸則需要移到帶超鏈的文字上才會有效果。浮動可以不用設定。

li a:hover標籤設定

字型顏色

這裡設定的字型顏色只有當滑鼠懸停時才會顯示出來。

背景設定

同樣,這裡設定的背景顏色或者**也是隻有當滑鼠懸停時才會表現出來。

2樓:黑馬程式設計師

舉例子說明:

比如:關鍵的地方有三個:

一是:style="background-color: transparent;"這裡是設定按鈕預設風格的,background-color:

transparent,意思是把背景顏色設為透明,這是一定要的,否則在不同的瀏覽器中,把**設為按鈕背景有可能是顯示不出來的。這裡還可以定義的風格,比如,寬度:width:

120px; 高度:height:30px; 字型顏色:

color:#ffffff; 背景**:background-image:

url(**); 等之間用;號隔開。

二是:onmouseover="this.style.

backgroundimage='url(1.jpg)'"表示當滑鼠移入時,背景**設定為1.jpg這張圖,可以在url()的括號中指定具體**地址和名稱。

三是: onmouseout="this.style.

表示當滑鼠移出時,背景**設定為2.jpg,這也是在url()中指定具體的**。

這只是一種簡單的寫法,更多的應該多瞭解js和css。

以上是滑鼠變背景的寫法。

3樓:青鳥中關村專家

材料/工具

dreamwear 8

方法:使用css :hover 偽類可以達到這個效果。

用法:a:hover 選擇器用於選擇滑鼠指標浮動在上面的元素。

1)、a:hover 選擇器可用於所有元素,不只是連結;

2)、a:link 選擇器設定指向未被訪問頁面的連結的樣式;

3)、a:visited 選擇器用於設定指向已被訪問的頁面的連結;

4)、a:active 選擇器用於活動連結。

!!注意:在 css 定義中,:hover 必須位於 :link 和 :visited 之後(如果存在的話),這樣樣式才能生效。

例如:/*當滑鼠懸浮到div上方時,將背景顏色更改為黃色*//divdiv:hover

4樓:老漁哥網路

你是需要滑鼠經過的時候的背景色變化吧?

一般是通過css的偽類實現的

a:hover

5樓:育知同創教育

這個是給背景元素加hover效果,比如元素a是要改變的背景,a:hover。

css按鈕背景滑鼠放上去變換背景的**怎麼設定

6樓:匿名使用者

簡單寫一個,或許有助於理解:關鍵的地方有三個:一是:

style="background-color: transparent;"這裡是設定按鈕預設風格的,background-color: transparent,意思是把背景顏色設為透明,這是一定要的,否則在不同的瀏覽器中,把**設為按鈕背景有可能是顯示不出來的。

這裡還可以定義的風格,比如,寬度:width:120px; 高度:

height:30px; 字型顏色:color:

#ffffff; 背景**:background-image:url(**); 等之間用;號隔開。

二是:onmouseover="this.style.

backgroundimage='url(1.jpg)'"表示當滑鼠移入時,背景**設定為1.jpg這張圖,可以在url()的括號中指定具體**地址和名稱。

三是: onmouseout="this.style.

表示當滑鼠移出時,背景**設定為2.jpg,這也是在url()中指定具體的**。

這只是一種簡單的寫法,更多的應該多瞭解js和css。

7樓:從前有個

假設你的按鈕的class是btn,兩個背景**分別是bg1.jpg和bg2.jpg,那麼可以這樣來做

css部分:

.btn

.btn:hover

html部分就很簡單了,給input加個樣式就行使用這個樣式時別忘了先把input的預設樣式,那些padding、margin、border什麼的都清零,然後再定義一下寬高,這樣出來的視覺效果會好些。

8樓:阿笑情感屋

標籤名:hover{內容}

行內css樣式怎麼設定滑鼠滑過的時候背景變色的效果??

9樓:匿名使用者

像你這樣引用css樣式只能把原本就很簡單的東西複雜化了~

10樓:匿名使用者

首頁給a標籤加上display:inline-block;轉為內聯塊元素;這樣a標籤設定寬度,高度,外邊距等都管用了

另外你最好到論壇裡搜尋一下:什麼是塊元素什麼是內聯元素,你就知道為什麼了,**發站內信了,這上面發不了

11樓:匿名使用者

http://www.w3.org/1999/xhtml">首頁首頁

首頁首頁

css中如何讓滑鼠經過時顯示背景**

12樓:匿名使用者

通常可以使用css樣式的 :hover 選擇器, 如示例div1。

也可以使用js來控制css樣式,用js可以靈活加入其它效果(延遲顯示、隨機背景圖), 如示例div2。

示例**:

div1

div2

*具體選擇根據需要靈活應用

*注意示例**要引用正確

如何用css樣式來實現當滑鼠放上去時會出現另一張背景**呢

13樓:匿名使用者

做好準備工作,把兩張100px x 100px的**合成 100 x 200 的。通過css**定位來達到切換效果。存放在根目錄內 img\tupian.gif

在body中首頁

14樓:匿名使用者

a:hover

滑鼠巨集怎麼設定,滑鼠巨集,如何設定?

最低0.27元開通文庫會員,檢視完整內 原發布者 洞房鈽敗 凱酷巨集按鍵設定步驟第一 滑鼠巨集怎麼設定你知道麼?跳眼英雄,比如盲僧,不祥,以盲僧舉例,如眼位在4,設定4 w為一個巨集命令,然後設定滑鼠的某個側鍵載入這個巨集,你按這個側鍵,就相當於插眼再w,前提是w別智慧加自我施法 附,只有少數比較高...

吃雞滑鼠巨集怎麼設定,吃雞滑鼠巨集怎麼設定?跪求!

具體操作如下 1 開啟遊戲進入到遊戲的主頁面,觀察到遊戲的選單欄,看一下各項設定。2 接下來要知道巨集設定是幹啥的,簡單來說,平時需要按多個鍵才能實現的操作,可以通過巨集設定,一鍵完成。3 找到羅技指令碼,在這裡要做的就是將高速開槍和壓槍相結合,然後設定。4 然後還要在設定時記得壓槍設定與槍的種類有...

吃雞滑鼠巨集怎麼設定?跪求,吃雞滑鼠巨集怎麼設定?

具體操作如下 1 開啟遊戲進入到遊戲的主頁面,觀察到遊戲的選單欄,看一下各項設定。2 接下來要知道巨集設定是幹啥的,簡單來說,平時需要按多個鍵才能實現的操作,可以通過巨集設定,一鍵完成。3 找到羅技指令碼,在這裡要做的就是將高速開槍和壓槍相結合,然後設定。4 然後還要在設定時記得壓槍設定與槍的種類有...