css怎麼設定滑鼠手勢,css怎麼設定滑鼠移動後的樣式

2022-10-31 20:30:20 字數 5468 閱讀 1838

1樓:黑馬程式設計師

屬性名: cursor

屬性值( 手勢狀態 ):

auto : 預設值。瀏覽器根據當前情況自動確定滑鼠游標型別。

all-scroll : ie6.0 有上下左右四個箭頭,中間有一個圓點的游標。用於標示頁面可以向上下左右任何方向滾動。

col-resize : ie6.0 有左右兩個箭頭,中間由豎線分隔開的游標。用於標示專案或標題欄可以被水平改變尺寸。

crosshair : 簡單的十字線游標。

default : 客戶端平臺的預設游標。通常是一個箭頭。

hand : 豎起一隻手指的手形游標。就像通常使用者將游標移到超連結上時那樣。

move : 十字箭頭游標。用於標示物件可被移動。

help : 帶有問號標記的箭頭。用於標示有幫助資訊存在。

no-drop : ie6.0 帶有一個被斜線貫穿的圓圈的手形游標。用於標示被拖起的物件不允許在游標的當前位置被放下。

not-allowed : ie6.0 禁止標記(一個被斜線貫穿的圓圈)游標。用於標示請求的操作不允許被執行。

pointer : ie6.0 和 hand 一樣。豎起一隻手指的手形游標。就像通常使用者將游標移到超連結上時那樣。

progress : ie6.0 帶有沙漏標記的箭頭游標。用於標示一個程序正在後臺執行。

row-resize : ie6.0 有上下兩個箭頭,中間由橫線分隔開的游標。用於標示專案或標題欄可以被垂直改變尺寸。

text : 用於標示可編輯的水平文字的游標。通常是大寫字母 i 的形狀。

vertical-text : ie6.0 用於標示可編輯的垂直文字的游標。通常是大寫字母 i 旋轉90度的形狀。

wait : 用於標示程式忙使用者需要等待的游標。通常是沙漏或手錶的形狀。

*-resize : 用於標示物件可被改變尺寸方向的箭頭游標。 w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize

url ( url ) : ie6.0 使用者自定義游標。使用絕對或相對 url 地址指定游標檔案(字尾為 .cur 或者 .ani )。

2樓:abc的德芙

1)、div預設正常滑鼠指標

2)、div和div 文字選擇效果

3)、div 移動選擇效果

4)、div 手指形狀 連結選擇效果

2、cursor樣式效果圖css cursor滑鼠游標指標樣式圖滑鼠指標說明

cursor設定或檢索在物件上移動的滑鼠指標採用何種系統預定義的游標形狀。

4、佈局結構

p /* css註釋: 設定滑鼠移動到html p物件時滑鼠變為文字選擇樣式 */

如日常我們在div+css佈局時候,我們希望滑鼠指向某個區域性span標籤物件時候,滑鼠指標游標就變為手指狀態,這個時候我們就對物件span設定cursor: pointer即可。以上我們圖例展示常用的滑鼠游標形狀與css單詞,希望佈局時候更加自身需要選擇設定滑鼠指標樣式。

需要注意是,游標切記勿濫用,也不要輕易設定自定義**為滑鼠樣式這樣會將網頁造成複雜與不符合使用者體驗感覺,切記游標慎用。

3樓:全國流竄

.x cursor可以是以下的值:

url 需使用的自定義游標的 url

default

預設游標(通常是一個箭頭)

auto

預設。瀏覽器設定的游標。

crosshair

游標呈現為十字線。

pointer

游標呈現為指示連結的指標(一隻手)

move

此游標指示某物件可被移動。

e-resize

此游標指示矩形框的邊緣可被向右(東)移動。

ne-resize

此游標指示矩形框的邊緣可被向上及向右移動(北/東)。

nw-resize

此游標指示矩形框的邊緣可被向上及向左移動(北/西)。

n-resize

此游標指示矩形框的邊緣可被向上(北)移動。

se-resize

此游標指示矩形框的邊緣可被向下及向右移動(南/東)。

sw-resize

此游標指示矩形框的邊緣可被向下及向左移動(南/西)。

s-resize

此游標指示矩形框的邊緣可被向下移動(北/西)。

w-resize

此游標指示矩形框的邊緣可被向左移動(西)。

text

此游標指示文字。

wait

此游標指示程式正忙(通常是一隻表或沙漏)。

help

此游標指示可用的幫助(通常是一個問號或一個氣球)。

4樓:遠走他鄉看世界

cursor: crosshair;

cursor的屬性有很多,是用來設定滑鼠形狀的語句。

常用的pointer就是小手。

css怎麼設定滑鼠移動後的樣式

5樓:山東文匯軟體

用hover就可以了,意思是當滑鼠經過時

舉個例子,一個叫top類的div:

.top:hover

意思是當滑鼠經過時字型顏色變為紅色,大小變為18畫素,離開後恢復原樣。

6樓:蔡先森

新增onmouse...事件,事件中獲取元素 假設是個div 例如

var mydiv=document.getelemntbyid("test");

mydiv.attr("style","width:200px;height:200px;......你要新增的樣式屬性");

css怎麼設定滑鼠變背景

7樓:愛染年

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

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

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

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

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

li標籤的定義

行高與文字顏色設定

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

背景設定

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

文字對齊和顯示方式

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

寬和高設定

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

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

li a標籤的設定

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

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

背景設定

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

顯示方式

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

寬高度與浮動設定

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

li a:hover標籤設定

字型顏色

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

背景設定

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

8樓:黑馬程式設計師

舉例子說明:

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

一是: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。

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

9樓:青鳥中關村專家

材料/工具

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

10樓:老漁哥網路

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

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

a:hover

11樓:育知同創教育

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

為什麼chrome的設定頁面不能用滑鼠手勢

12樓:

chrome的設定頁面不支援滑鼠手勢功能

13樓:匿名使用者

呵呵,我也碰到這種情況過,後來解除安裝重灌了

在css中如何設定按鈕滑鼠劃過變顏色

2 在index.html中的標籤中,輸入css buttonbutton hover 3 瀏覽器執行index.html頁面,此時顯示出了藍色背景顏色的按鈕。4 將滑鼠移入按鈕,此時按鈕的背景顏色變成了橙色。1 首先我們選擇滑鼠單擊建立一個新的html檔案。2 在html檔案中找到body標籤,在...

CSS讓這個字型變成白色,CSS設定文章字型顏色為白色

把這段樣式放進你的標籤下面 但是有一點你要注意 這段樣式會讓頁面中所有的連結顏色為白色 所以如果你只是針對這裡要白色 就要根據你實際的html結構來新增樣式 這段文字是超連結吧,那就要重新定義連線的樣式用一個div將這段文字包含,比如說要變白的連結css樣式如下 new a link new a v...

css中如何定義網頁寬度和位置,css中怎麼控制網頁的寬度

1 首先開啟hbuilder軟體,新建一個html檔案,寫入一個p標籤,裡面寫入一句話 2 然後在上方定義style標籤,修改body標籤的樣式,這裡用width屬性設定body的寬度為600畫素,高度設為1000,居中使用margin屬性,最後為了觀察效果最後在設定一個寬度為10畫素的邊框並給邊框...