深入探究CSS鼠标指针交互效果
今天，来实现这样一个有意思的交互效果，通过这个交换效果来聊聊前端鼠标指针交互，希望对大家有所帮助！
将原本的鼠标指针样式，修改成自己想要的效果，并且添加上一些特殊的交互效果。【推荐学习：css视频教程】
修改鼠标样式
首先，第一个问题，我们可以看到，上图中，鼠标指针的样式被修改成了一个圆点：
正常而言应该是这样：
当然，这里比较简单，在 CSS 中，我们可以通过 cursor 样式，对鼠标指针形状进行修改。
利用 cursor 修改鼠标样式
cursor CSS 属性设置鼠标指针的类型，在鼠标指针悬停在元素上时显示相应样式。
cursor: auto; cursor: pointer; ... cursor: zoom-out; /* 使用图片 */ cursor: url(hand.cur) /* 使用图片，并且设置 fallback 兜底 */ cursor: url(hand.cur), pointer;
这个大家应该都清楚，通常而言，在不同场景下，选择不同鼠标指针样式，也是一种提升用户体验的手段。
当然，在本交互中，我们并非要将 cursor 光标设置成任一样式，刚好相反，我们需要将他隐藏。
通过 cursor: none 隐藏光标
在这里，我们通过 cursor: none 隐藏页面的鼠标指针：
{
cursor: none;
}
如此一来，页面上的鼠标指针就消失了：
通过全局事件监听，模拟鼠标指针
既然，消失了，我们就简单模拟一个鼠标指针。
我们首先实现一个 10px x 10px 的圆形 div，设置为基于 <body> 绝对定位：
<div id="g-pointer"></div>
#g-pointer {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
background: #000;
border-radius: 50%;
}
那么，在页面上，我们就得到了一个圆形黑点：
接着，通过事件监听，监听 body 上的 mousemove，将小圆形的位置与实时鼠标指针位置重合：
const element = document.getElementById("g-pointer");
const body = document.querySelector("body");
function setPosition(x, y) {
element.style.transform = `translate(${x}px, ${y}px)`;
}
body.addEventListener('mousemove', (e) => {
window.requestAnimationFrame(function(){
setPosition(e.clientX - 5, e.clientY - 5);
});
});
这样，如果不设置 cursor: none，将会是这样一个效果：
再给 body 加上 cursor: none，就相当于模拟了一个鼠标指针：
在这个基础上，由于现在的鼠标指针，实际上是个 div，因此我们可以给它加上任意的交互效果。
以文章一开头的例子为例，我们只需要借助混合模式 mix-blend-mode: exclusion，就能够实现让模拟的鼠标指针能够智能地在不同背景色下改变自己的颜色。
对于混合模式这个技巧还有所疑问的，可以看看我的这篇文章：利用混合模式，让文字智能适配背景颜色
https://github.com/chokcoco/iCSS/issues/169
完整的代码：
<p>Lorem ipsum dolor sit amet</p> <div id="g-pointer-1"></div> <div id="g-pointer-2"></div>
body {
cursor: none;
background-color: #fff;
}
#g-pointer-1,
#g-pointer-2
{
position: absolute;
top: 0;
left: 0;
width: 12px;
height: 12px;
background: #999;
border-radius: 50%;
background-color: #fff;
mix-blend-mode: exclusion;
z-index: 1;
}
#g-pointer-2 {
width: 42px;
height: 42px;
background: #222;
transition: .2s ease-out;
}
const body = document.querySelector("body");
const element = document.getElementById("g-pointer-1");
const element2 = document.getElementById("g-pointer-2");
const halfAlementWidth = element.offsetWidth / 2;
const halfAlementWidth2 = element2.offsetWidth / 2;
function setPosition(x, y) {
element.style.transform = `translate(${x - halfAlementWidth}px, ${y - halfAlementWidth}px)`;
element2.style.transform = `translate(${x - halfAlementWidth2}px, ${y - halfAlementWidth2}px)`;
}
body.addEventListener('mousemove', (e) => {
window.requestAnimationFrame(function(){
setPosition(e.clientX, e.clientY);
});
});
我们就能完美还原出题图的效果：
完整的代码，你可以戳这里：Mouse Cursor Transition
https://codepen.io/Chokcoco/pen/rNJQXXV
伪类事件触发
有一点需要注意的是，利用模拟的鼠标指针去 Hover 元素，Click 元素的时候，会发现这些事件都无法触发。
这是由于，此时被隐藏的指针下面，其实悬浮的我们模拟鼠标指针，因此，所有的 Hover、Click 事件都触发在了这个元素之上。
当然，这个也非常好解决，我们只需要给模拟指针的元素，添加上 pointer-events: none，阻止默认的鼠标事件，让事件透传即可：
{
pointer-events: none;
}
鼠标跟随，不仅于此
当然，这里核心就是一个鼠标跟随动画，配合上 cursor: none。
而且，鼠标跟随，我们不一定一定要使用 JavaScript。
我在 不可思议的纯 CSS 实现鼠标跟随 一文中，介绍了一种纯 CSS 实现的鼠标跟随效果，感兴趣的也可以看看。
https://github.com/chokcoco/iCSS/issues/46
基于纯 CSS 的鼠标跟随，配合 cursor: none，也可以制作出一些有意思的动画效果。像是这样：
CodePen Demo -- Cancle transition & cursor none
https://codepen.io/Chokcoco/pen/gOvZoVv
（学习视频分享：web前端）
以上是深入探究CSS鼠标指针交互效果的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undress AI Tool
免费脱衣服图片
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
如何在CSS中使用大众和VH单元
Aug 07, 2025 pm 11:44 PM
vw和vh单位通过将元素尺寸与视口宽度和高度关联，实现响应式设计；1vw等于视口宽度的1%，1vh等于视口高度的1%；常用于全屏区域、响应式字体和弹性间距；1.全屏区域使用100vh或更优的100dvh避免移动浏览器地址栏影响；2.响应式字体可用5vw并结合clamp(1.5rem,3vw,3rem)限制最小和最大尺寸；3.弹性间距如width:80vw、margin:5vhauto、padding:2vh3vw可使布局自适应；需注意移动设备兼容性、可访问性及固定宽度内容冲突，建议优先使用dvh
虚拟货币交易app有哪些_2025正规虚拟货币交易app推荐前十名
Aug 08, 2025 pm 06:42 PM
1、Binance币安以庞大的交易量和丰富的交易对着称，提供多元交易模式与完善生态系统，并通过SAFU基金和多重安全技术保障用户资产安全且高度重视合规运营；2、OKX欧易提供广泛的数字资产交易服务和统一交易账户模式，积极布局Web3领域，并通过严格风控和用户教育提升交易安全与体验；3、gate.io芝麻开门以上币速度快和币种丰富见长，提供多样化交易工具与增值服务，采用多重安全验证机制并坚持资产储备透明化以增强用户信任；4、火币Huobi凭借深厚的行业积累提供一站式数字资产服务，拥有强大交易深度与
如何有效使用CSS选择器
Aug 11, 2025 am 11:12 AM
使用CSS选择器时应优先采用低特异性选择器，避免过度限定；1.理解特异性层级，按类型、类、ID顺序合理使用；2.多用类名提升可复用性和可维护性；3.适度使用属性和伪类选择器，避免性能问题；4.保持选择器简短且作用域明确；5.采用BEM等命名规范提升结构清晰度；6.避免滥用标签选择器和:nth-child，优先使用工具类或模块化CSS，确保样式长期可控。
如何使用CSS创建垂直线
Aug 11, 2025 pm 12:49 PM
使用带边框的div可快速创建垂直线，通过设置border-left和height定义样式和高度；2.利用::before或::after伪元素可在无额外HTML标签的情况下添加垂直线，适合装饰性分隔；3.在Flexbox布局中，通过设置divider类的宽度和背景色，可实现弹性容器间的自适应垂直分隔线；4.在CSSGrid中，将垂直线作为独立列（如auto宽度列）插入网格布局，适用于响应式设计；应根据具体布局需求选择最合适的方法，确保结构简洁且易于维护。
如何在CSS中使用过滤器属性
Aug 11, 2025 pm 05:29 PM
ThecssfilterPropertyAllowSeffectSlikeSlikeBlur，亮度，亮度和格雷斯级倾向于directliectlytohtmlelements.1）usethesyntaxfilter：filter-finction（value）to applyfeffs.2）to applyeffeffss.2）combinemultfielterspacepacepacepacepaceepaceepaceepaceepaceeparity，e.g.g.g.，blimtrur（2px）blirtrur（2px），2pxcx e.g.2pxcx，blimur（2pxcx）
CSS混合混合模式示例
Aug 08, 2025 pm 12:59 PM
mix-blend-mode属性用于控制元素内容与背景的混合效果，1.使用multiply可实现文字与背景图的正片叠底融合；2.screen使图像变亮，适合深色背景；3.overlay增强对比，结合multiply与screen特点；4.difference产生强烈反差，适用于创意设计；需确保元素重叠及正确的z-index层叠顺序，配合isolation:isolate可限制混合范围，通过调整颜色与模式可实现丰富的视觉效果。
如何更改CSS中的列表样式
Aug 17, 2025 am 10:04 AM
要更改CSS列表样式，首先使用list-style-type改变项目符号或编号样式，1.使用list-style-type设置ul的项目符号为disc、circle或square，ol的编号为decimal、lower-alpha、upper-alpha、lower-roman或upper-roman，2.用list-style:none完全移除标记，3.使用list-style-image:url('bullet.png')替换为自定义图像，4.通过list-style-position:in
如何防止CSS中的线路断裂
Aug 08, 2025 pm 05:14 PM
Usewhite-space:nowraptopreventtextfrombreakingontomultiplelines,ensuringcontentstaysonasingleline;2.Applythispropertytoinline,inline-block,orflexitems,whereflex-wrap:nowrappreventsitemwrappingandwhite-space:nowrappreventsinternaltextwrapping;3.Forspe
