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 然後還要在設定時記得壓槍設定與槍的種類有...