滑鼠滑過和獲取焦點樣式

陽光下的冷靜發表於2018-11-26

cursor屬性:定義了滑鼠指標放在一個元素邊界範圍內時所用的游標形狀

設定不同的屬性值會出現不同的效果:

    文字:例如一段文字,滑鼠放上去,滑鼠變成不同的形狀

  1. cursor:default   -->預設的是箭頭的形狀
  2. cursor:move     -->讓滑鼠樣式變成移動的樣式(十字架)
  3. cursor:text        -->讓滑鼠樣式變成選擇(一個大寫的i)
  4. cursor:pointer   -->讓滑鼠樣式變成小手

但對於一些其他的元素,滑鼠放上去也有不同的樣式或者設定自己想要的樣式,

例如:input元素,你為它設定了邊框的大小,顏色,但是一旦你獲得焦點,這個input的邊框的顏色會變成藍色,這與你預期的效果有所差異。為了消除這種現象,你只要在你的樣式中加入一行如下程式碼:

outline: none;/*取消藍色輪廓線*/

例如:textarea元素,你給它設定了行列數,但當你獲取文字域的焦點時,整個文字域的右下角會有一個小標誌,你拖動這個標誌是可以進行放大該文字域的大小的,這個特性其實在一般的情況下是不利於網頁設計的。為了解決這個問題,我們只需要在樣式中加入一行如下程式碼:

resize: none;/*防止拖拽(文字域變大)*/

 

相關文章