【CSS】更改用户界面样式 ① ( 更改鼠标样式 | 更改鼠标样式应用场景 | 代码示例 )

文章目录

  • 一、更改鼠标样式
  • 二、更改鼠标样式代码示例
  • 三、更改鼠标样式应用场景





一、更改鼠标样式



为对象元素设置 cursor 样式 , 可以更改鼠标移动到该元素上的显示样式 ;

cursor 样式常用属性值 :

  • default : 默认鼠标样式 , 白色箭头鼠标 ;
  • pointer : 小手形状 ;
  • move : 移动 - 十字架四个箭头 ;
  • text : 文本 - 鼠标移动到文本上的样式 ;
  • not-allowed : 禁止 ;

还有其它的属性值如下图所示 :

【CSS】更改用户界面样式 ① ( 更改鼠标样式 | 更改鼠标样式应用场景 | 代码示例 )_第1张图片
【CSS】更改用户界面样式 ① ( 更改鼠标样式 | 更改鼠标样式应用场景 | 代码示例 )_第2张图片





二、更改鼠标样式代码示例



代码示例 :

DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鼠标样式修改title>
head>
<body>
	<ul>
		<li style="cursor: default;">defaultli>
		<li style="cursor: pointer;">pointerli>
		<li style="cursor: move;">moveli>
		<li style="cursor: text;">textli>
		<li style="cursor: not-allowed;">not-allowedli>
		<li style="cursor: auto;">autoli>
		<li style="cursor: e-resize;">e-resizeli>
		<li style="cursor: help;">helpli>
		<li style="cursor: n-resize;">n-resizeli>
		<li style="cursor: ne-resize;">ne-resizeli>
		<li style="cursor: nw-resize;">nw-resizeli>
		<li style="cursor: progress;">progressli>
		<li style="cursor: s-resize;">s-resizeli>
		<li style="cursor: se-resize;">se-resizeli>
		<li style="cursor: sw-resize;">sw-resizeli>
		<li style="cursor: w-resize;">w-resizeli>
		<li style="cursor: url();">url()li>
	ul>
body>
html>

截图无法显示鼠标效果 , 展示下列表样式 :

【CSS】更改用户界面样式 ① ( 更改鼠标样式 | 更改鼠标样式应用场景 | 代码示例 )_第3张图片





三、更改鼠标样式应用场景



在之前的 【CSS】轮播图案例开发 ( 基本设置 | 子绝父相 | 浏览器水平居中 | 圆角设置 | 绝对定位居中设置 ) 轮播图中 , 鼠标移动到 轮播图底部的小圆点上时 , 一般会变成小手形状的 , 这样用户体验更好 ;

  • 标签设置 cursor: pointer; 样式 , 即可设置上述效果 , 当鼠标移动到小圆点上时 , 变成小手 ; 如下图所示 ;
    在这里插入图片描述


    在电商网站 , 浏览商品时 , 如下情景 , 使用的是 鼠标的 移动样式 , 需要为左侧的商品图片设置 cursor: move; 样式 ;
    【CSS】更改用户界面样式 ① ( 更改鼠标样式 | 更改鼠标样式应用场景 | 代码示例 )_第4张图片

    鼠标的文本样式很容易理解 , 当鼠标移动到文本上时 , 鼠标需要显示成 在这里插入图片描述 样式 , 通过设置 cursor: text; 属性即可 ;


    禁止按钮 用于表示 , 在某种情境下 , 用户不能操作某个元素 , 使用 cursor: not-allowed; 设置 ;

    在这里插入图片描述

  • 你可能感兴趣的:(CSS,css,前端,html,cursor,更改鼠标样式)