回首頁 與我們連絡 網站地圖 加入我的最愛



 





不要以為只有你使用的Windows系統才有所謂不同的滑鼠指標變化呦!在網頁中也可以有不同的滑鼠指標變化呦!不過很可惜目前只有IE4才有這種變化效果。

滑鼠指標也就是所謂的CURSOR,目前在CSS2的樣式性質中一共可以設定十六種屬性值,也就可以呈現的指標樣式有十六種:

auto
由使用者瀏覽器預設的滑鼠箭頭。
crosshair
十字交叉的滑鼠箭頭。
default
由使用者作業系統所決定的滑鼠指標。
hand
手指頭指向的滑鼠指標。
move
十字指向四方的指標箭頭。
e-resize
指向右方的箭頭滑鼠指標。
ne-resize
指向右上方的箭頭滑鼠指標。
nw-resize
指向左上方的箭頭滑鼠指標。
n-resize
指向上方的箭頭滑鼠指標。
se-resize
指向右下方的箭頭滑鼠指標。
sw-resize
指向左下方的箭頭滑鼠指標。
s-resize
指向下方的箭頭滑鼠指標。
w-resize
指向左方的箭頭滑鼠指標。
text
代表可編輯文字的I字滑鼠指標。
wait
表示等待作業或忙碌中的滑鼠指標。
help
箭頭再加上問號的滑鼠指標。

註:把你的滑鼠移至上表中的滑鼠值表屬性名稱上你就可以看到相對應的滑鼠指標形狀呦 !


標準的樣式宣告:
我們可以使用標準的樣式宣告:將我們所要設定的樣式性質包括在<STYLE>與</STYLE>標籤之間,
同時必須於CSS宣告內容的兩端加上 <!----> 的註解符號!最重要的是樣式宣告內容必須被包括在<HEAD>與</HEAD>之間。

以下是一個簡短的HTML網頁範例,我們宣告CSS的虛擬類別控制被包括在<DIV>與</DIV>網頁標籤中的文字字串:當滑鼠移至字串上時滑鼠指標就變成箭頭再加上問號的指標形狀

<html>
<HEAD>
<STYLE>
<!--
DIV {cursor: help}
-->
</STYLE>
<title>滑鼠指表控制範例1</title>
</HEAD>
<body>
<DIV>滑鼠指表控制範例1</DIV>
</body>
</html>

[實例展示] 


合併於主文標籤中的樣式宣告:
另外還有一種常用來設定網頁中滑鼠指標的宣告方式:那就是將接我們所要設定的樣式性質及屬性質直接包括在網頁標籤之中

要在網頁標籤中設定滑鼠指標的樣式性質必須透過STYLE標籤:我們必須利用STYLE標籤來設定被包括在特定網頁標籤中的圖片或文字字串當滑鼠移至字串上時滑鼠指標所要呈現的指標形狀

以下這個HTML網頁範例就是利用合併於主文(包括在<BODY>與</BODY>標籤之中的內容)標籤中的STYLE樣式宣告,來達到改變滑鼠指標形狀的目的:當滑鼠移到<P STYLE="cursor: wait">與</P>網頁標籤中的文字字串時滑鼠指標就變成表示等待作業或忙碌中的滑鼠指標

<html>
<HEAD>
<title>滑鼠指表控制範例2</title>
</HEAD>
<BODY>
<P STYLE="cursor: wait">滑鼠指表控制範例2</P>
</BODY>
</html>

[實例展示]


虛擬類別與滑鼠指標:
滑鼠指標性質其實可以使用於任何的標籤特性上,也就是說它相容於所有的網頁標籤,不但如此,滑鼠指標性質對於虛擬類別的變化更是如虎添翼

以下這個HTML網頁範例,

  1. 我們宣告CSS的虛擬類別控制被包括在<A>與</A>鏈結標籤中的文字鏈結字串:尚未瀏覽過的鏈結字串顏色為綠色字體大小為14pt、正要開始瀏覽的鏈結字串顏色為藍色、已經瀏覽過的鏈結字串顏色為咖啡色字體大小為16pt並且將滑鼠指表形狀設為十字交叉的滑鼠箭頭及滑鼠指標移至鏈結字串時所顯現的文字外觀顏色為紅色大小為16pt字型為標楷體滑鼠指表形狀設為指向上方的箭頭滑鼠指標。

  2. 包括在<P>與</P>非鏈結標籤中的文字字串:當滑鼠移至字串上時滑鼠指標就變成表示等待作業或忙碌中的滑鼠指標。

<html>
<HEAD>
<title>滑鼠指表控制範例3</title>
<STYLE>
<!--
A:link {color:Green;font-size:14pt}
A:active {color:Blue}
A:visited {color:#772B1A;font-size:16pt;cursor:crosshair}
A:hover {color:Red;font-size:16pt;font-family:標楷體;cursor:n-resize
}
-->
</STYLE>
</HEAD>
<BODY>
<P STYLE="cursor: wait">不具超鏈結功能的P標籤</P>
<a class=lin href="webusebex3.htm">有超鏈結能力的A標籤</A>
</BODY>
</html>

[實例展示]

 

<

CSS 教學文件
CSS入門講座
基礎網頁應用
進階網頁應用
結合JavaScript應用
 

本網頁內容由昱得資訊工作室楊宗誌(小誌 )製作(C) Copyright Valor-Studio since in 1993
非經正式書面同意,不得將全部或部分內容,以任何方式轉載於其他網站或用於任何商業行為