css关于鼠标样式的设置
css关于鼠标样式的设置
消散了的诗意 发表于9个月前
css关于鼠标样式的设置
  • 发表于 9个月前
  • 阅读 6
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

CSS有一个属性:cursor,其作用是设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 

 

  • auto默认(自适应)
  • text文本
  • hand手型
  • pointer手型
  • help带有问好的箭头
  • progress正在加载
  • move移动十字
  • no-drop不能放下
  • not-allowed禁止标记
  • wait等待
  • row-resize垂直拉伸
  • col-resize水平拉伸
  • vertical-text垂直文本
  • crosshair十字准心的箭头
  • n-resize上下的箭头(上)
  • s-resize上下的箭头(下)
  • w-resize左右的箭头(左)
  • e-resize左右的箭头(右)
  • ne-resize右上左下的箭头(右上)
  • sw-resize右上坐下的箭头(左下)
  • nw-resize左上右下的箭头(左上)
  • se-resize左上右下的箭头(右下)
  • <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<ul>
    			<li style="cursor:auto"><span>auto默认(自适应)</span></li>
    			<li style="cursor:text"><span>text文本</span></li>
    			<li style="cursor:hand"><span>hand手型</span></li>
    			<li style="cursor:pointer"><span>pointer手型</span></li>
    			<li style="cursor:help"><span>help带有问好的箭头</span></li>
    			<li style="cursor:progress"><span>progress正在加载</span></li>
    			<li style="cursor:move"><span>move移动十字</span></li>
    			<li style="cursor:no-drop"><span>no-drop不能放下</span></li>
    			<li style="cursor:not-allowed"><span>not-allowed禁止标记</span></li>
    			<li style="cursor:wait"><span>wait等待</span></li>
    			<li style="cursor:row-resize"><span>row-resize垂直拉伸</span></li>
    			<li style="cursor:col-resize"><span>col-resize水平拉伸</span></li>
    			<li style="cursor:vertical-text"><span>vertical-text垂直文本</span></li>
    			<li style="cursor:crosshair"><span>crosshair十字准心的箭头</span></li>
    			<li style="cursor:n-resize"><span>n-resize上下的箭头(上)</span></li>
    			<li style="cursor:s-resize"><span>s-resize上下的箭头(下)</span></li>
    			<li style="cursor:w-resize"><span>w-resize左右的箭头(左)</span></li>
    			<li style="cursor:e-resize"><span>e-resize左右的箭头(右)</span></li>
    			<li style="cursor:ne-resize"><span>ne-resize右上左下的箭头(右上)</span></li>
    			<li style="cursor:sw-resize"><span>sw-resize右上坐下的箭头(左下)</span></li>
    			<li style="cursor:nw-resize"><span>nw-resize左上右下的箭头(左上)</span></li>
                <li style="cursor:se-resize"><span>se-resize左上右下的箭头(右下)</span></li>
    		</ul>
    		<style type="text/css">
    			li{
    				margin: 15px auto;
    				width: 300px;
    				list-style: none;
    				text-align: center;
    				line-height: 5ex;
    				background-color: #FAF0E6;
    				color:#5E2612;
    			}
    		</style>
    	</body>
    </html>

     

标签: css 鼠标
共有 人打赏支持
粉丝 0
博文 47
码字总数 20595
×
消散了的诗意
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: