CSS鼠標懸浮及其樣式

hover鼠標懸浮的使用和定義用法

示例選擇鼠標指針浮動在其上的元素，並設置其樣式：

 .box:hover{
 background-color: red;
 }

定義和用法 :hover 選擇器用於選擇鼠標指針浮動在上面的元素。
提示：hover 選擇器可用於所有元素 :link 選擇器設置指向未被訪問頁面的鏈接的樣式，:visited 選擇器用於設置指向已被訪問的頁面的鏈接，:active 選擇器用於活動鏈接。
注釋：在 CSS 定義中，:hover 必須位於 :link 和 :visited 之後（如果存在的話），這樣樣式才能生效。

鼠標懸浮樣式

這裏我們要用cursor屬性
cursor 屬性規定要顯示的光標的類型（形狀）。
1、default 默認光標(通常是一個箭頭)
2、auto 默認。瀏覽器設置的光標。
3、crosshair光標呈現為十字線。
4、pointer 光標呈現為指示鏈接的指針(-只手)
5、move 此光標指示某對象可被移動。
6、e-resize 此光標指示矩形框的邊緣可被向右(東)移動。
7、ne-resize此光標指示矩形框的邊緣可被向 上及向右移動(北東)。
8、nw-resize此光標指示矩形框的邊緣可被向 上及向左移動(北西)。
9、n-resize 此光標指示矩形框的邊緣可被向上(北)移動。
10、se-resize此光標指示矩形框的邊緣可被向 下及向右移動(南東)。
11、sw-resize此光標指示矩形框的邊緣可被向 下及向左移動(南西)。
12、s-resize 此光標指示矩形框的邊緣可被向下移動(北西)。
13、w-resize 此光標指示矩形框的邊緣可被向左移動(西)。
14、text 此光標指示文本。
15、wait 此光標指示程序正忙(通常是一只表或沙漏)。
16、help 此光標指示可用的幫助(通常是一個問號或-個氣球)。 代碼

 <style>
 *{
 list-style: none;
 }
 .default:hover{
 cursor: default;
 /* 默認光標（通常是一個箭頭) */
 }
 .auto:hover{
 cursor: auto;
 /*默認。瀏覽器設置的光標*/
 }
 .crosshair:hover{
 cursor: crosshair;
 /*光標成十字線*/
 }
 .pointer:hover{
 cursor:pointer;
 /*光標呈現為指示鏈接的指針（一只手）*/
 }
 .move:hover{
 cursor: move;
 /*此光標指示某對象可被移動。*/
 }
 .e-resize:hover{
 cursor: e-resize;
 /*此光標指示矩形框的邊緣可被向右（東）移動。*/
 }
 .ne-resize:hover{
 cursor: ne-resize;
 /*此光標指示矩形框的邊緣可被向上及右移動（北/東）。*/
 }
 .nw-resize:hover{
 cursor: nw-resize;
 /*此光標顯示矩形的邊緣可被向上及向左移動（北/西）。*/
 }
 .n-resize:hover{
 cursor: n-resize;
 /*此光標顯示矩形的邊緣可被向上及向上（北）移動。*/
 }
 .se-resize:hover{
 cursor: se-resize;
 /*此光標顯示矩形的邊緣可被向上及向下向右移動（南/東）。*/
 }
 .sw-resize:hover{
 cursor: sw-resize;
 /*此光標顯示矩形的邊緣可被向上及向下及向左移動（南/西）。*/
 }
 .s-resize:hover{
 cursor: s-resize;
 /*此光標顯示矩形的邊緣可被向下移動（北/西）。*/




 }
 .w-resize:hover{
 cursor: w-resize;
 /*此光標顯示矩形的邊緣可被向左移動（西）。*/
 }
 .text:hover{
 cursor: text;
 /* 此光標指文本 */
 }
 .wait:hover{
 cursor: wait;
 /*此光標指示程序正忙（通常是一只表或沙漏）*/
 }
 .help:hover{
 cursor: help;
 /*此光標指示可用的幫助(通常是一個問號或一個氣球)。*/
 }
 </style>
</head>
 <ul>
 <li class="default">default</li>
 <li class="auto">auto</li>
 <li class="crosshair">crosshair</li>
 <li class="pointer">pointer</li>
 <li class="move">move</li>
 <li class="e-resize">e-resize</li>
 <li class="ne-resize">ne-resize</li>
 <li class="nw-resize">nw-resize</li>
 <li class="n-resize">n-resize</li>
 <li class="se-resize">se-resize</li>
 <li class="sw-resize">sw-resize</li>
 <li class="s-resize">s-resize</li>
 <li class="w-resize">w-resize</li>
 <li class="text">text</li>
 <li class="wait">wait</li>
 <li class="help">help</li>
</body>

2019.2.6/17:05 投稿