熱情輕鬆地過生活: HTML滑鼠游標大全

2013年9月25日星期三

HTML滑鼠游標大全

我們有時候可能希望當使用者滑鼠游標移到某張圖片或是某個元素時會有不同的游標圖示，
這時候就可透過cursor這個屬性來設定游標的圖示，我挑了幾個比較常用到的游標圖示，如以下的程式碼:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
div {
display: inline-block;
border: 2px solid red;
width: 120px;
height: 120px;
vertical-align:bottom;
}
</style>
</head>
<body>
<div style="cursor:col-resize;">水平拖動線</div>
<div style="cursor:crosshair;">十字線</div>
<div style="cursor:move;">代表移動十字箭頭</div>
<div style="cursor:help;">帶問號的箭頭</div>
<div style="cursor:not-allowed">禁止</div>
<div style="cursor:pointer;">手型</div>
<div style="cursor:progress;">帶沙漏的箭頭</div>
<div style="cursor:row-resize;">垂直拖動線</div>
<div style="cursor:text;">水平文字編輯</div>
<div style="cursor:vertical-text;">垂直文字編輯</div>
<div style="cursor:wait;">沙漏</div>
<div style="cursor:n-resize;">可向上拖動的</div>
<div style="cursor:ne-resize;">上、右可拖動的</div>
<div style="cursor:se-resize;">下、右可拖動的</div>
</body>
</html>

沒有留言:

張貼留言

訂閱：張貼留言 (Atom)