当前位置:首页 > CSS

css鼠标制作

2026-01-28 07:40:53CSS

CSS 鼠标样式定制

修改光标形状
使用 cursor 属性更改鼠标悬停时的图标样式。常见值包括:

  • pointer(手型指针)
  • text(文本输入光标)
  • wait(加载等待)
  • crosshair(十字线)
  • not-allowed(禁止操作)
button {
  cursor: pointer;
}

自定义光标图片
通过 url() 引用图片,并设置备用样式(若图片加载失败):

.custom-cursor {
  cursor: url('custom.png'), auto;
}

支持 .cur.png.svg 格式,需指定热点位置(如 url('image.png') 10 10)。

css鼠标制作

悬停动画效果
结合 transitiontransform 实现交互反馈:

.element:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

禁用鼠标事件
使用 pointer-events 控制元素是否响应鼠标操作:

css鼠标制作

.disabled {
  pointer-events: none;
  opacity: 0.6;
}

高级技巧:追踪鼠标位置
通过 JavaScript 获取坐标并联动 CSS 变量:

document.addEventListener('mousemove', (e) => {
  document.documentElement.style.setProperty('--x', `${e.clientX}px`);
  document.documentElement.style.setProperty('--y', `${e.clientY}px`);
});

CSS 中使用变量:

.follow-cursor {
  position: absolute;
  left: var(--x);
  top: var(--y);
}

标签: 鼠标css
分享给朋友:

相关文章

用css制作导航条

用css制作导航条

水平导航条制作 使用display: inline-block或flexbox实现水平导航 为<ul>和<li>设置样式消除默认列表样式 添加padding和margin控制间…

css怎么制作表单

css怎么制作表单

基础表单结构 使用HTML创建表单元素,搭配CSS进行样式设计。表单通常包含<form>标签及输入控件(如<input>、<textarea>、<select…

css制作goole

css制作goole

使用CSS制作Google标志 Google标志由多彩的字母和简洁的字体组成,可以通过CSS的字体属性、颜色渐变和布局来实现。 字体选择 Google标志使用自定义字体"Product Sans",…

css 边框制作

css 边框制作

基础边框设置 使用 border 属性可快速设置边框样式、宽度和颜色: .element { border: 1px solid #000; /* 宽度 | 样式 | 颜色 */ } 样式选…

css jquery

css jquery

CSS 与 jQuery 的基础用法 CSS(层叠样式表)用于控制网页的样式和布局,而 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Aja…

css表格制作

css表格制作

CSS表格制作方法 使用CSS创建表格可以通过多种方式实现,以下是常见的几种方法: 使用HTML原生表格标签结合CSS样式 <table class="styled-table">…