CSS 修改鼠标图标样式

简介: CSS 修改鼠标图标样式

自定义的鼠标图标,推荐使用ico或cur格式,png也可以。

修改body的设置鼠标样式

body不代表所有html元素。

body{
  cursor: url(../pic/cursor/Luo\ Tianyi.png), default;
  width: 100%;
  height: 100%;
}

cursor末尾的default:default是默认样式之一,修改样式失败时,使用default样式;除了default,还有auto、poniter、wait、move、help等可选择的默认样式。

将body的height设置为100%,可防止页面底部鼠标样式不生效的问题。

html{
  cursor: url(../pic/cursor/Luo\ Tianyi.png), default;
  width: 100%;
  height: 100%;
}

修改所有元素的鼠标样式

*{
  cursor: url(../pic/cursor/Luo\ Tianyi.png), default;
}

修改整个页面的鼠标样式

*可以配合body或html,修改整个页面的鼠标样式。

在Windows系统浏览器访问没问题;在Linux系统(如Ubuntu)浏览器访问,页面底部鼠标样式不生效:

*{
  cursor: url(../pic/cursor/Luo\ Tianyi.png), default;
}
body{
  cursor: url(../pic/cursor/Luo\ Tianyi.png), default;
  width: 100%;
  height: 100%;
}
Windows和Linux均生效:
*{
  cursor: url(../pic/cursor/Luo\ Tianyi.png), default;
}
html{
  cursor: url(../pic/cursor/Luo\ Tianyi.png), default;
  width: 100%;
  height: 100%;
}
目录
相关文章
|
1天前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
14 2
|
18天前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
50 1
|
1月前
|
缓存 前端开发
css内部样式和外部样式的性能比较和使用规范
CSS 的内部样式和外部样式各有优缺点,适用于不同场景。
|
2天前
|
前端开发 容器
CSS实现旋转圆角叠加样式,你学会了吗?
CSS实现旋转圆角叠加样式,你学会了吗?
10 0
|
26天前
|
前端开发
css <样式一>
css <样式一>
16 1
|
1月前
|
设计模式 移动开发 前端开发
CSS内联样式的使用,吐血整理
CSS内联样式的使用,吐血整理
35 6
|
20天前
|
前端开发
Vue3基础(十ba)___在css中使用props或者计算属性的变量,来实现动态样式
本文介绍了如何在Vue3中通过CSS变量和props或计算属性来实现动态样式。
16 0
|
2月前
|
XML 前端开发 数据格式
CSS常用样式及示例
CSS常用样式及示例
|
2月前
|
前端开发
导航栏也时尚:CSS缩放动画,让导航链接在鼠标经过时绽放!
导航栏也时尚:CSS缩放动画,让导航链接在鼠标经过时绽放!
|
2月前
|
前端开发 Java UED
JSF 面向组件开发究竟藏着何种奥秘?带你探寻可复用 UI 组件设计的神秘之路
【8月更文挑战第31天】在现代软件开发中,高效与可维护性至关重要。JavaServer Faces(JSF)框架通过其面向组件的开发模式,提供了构建复杂用户界面的强大工具,特别适用于设计可复用的 UI 组件。通过合理设计组件的功能与外观,可以显著提高开发效率并降低维护成本。本文以一个具体的 `MessageComponent` 示例展示了如何创建可复用的 JSF 组件,并介绍了如何在 JSF 页面中使用这些组件。结合其他技术如 PrimeFaces 和 Bootstrap,可以进一步丰富组件库,提升用户体验。
47 0