如何阻止自定义鼠标光标悬浮特定元素时恢复为默认样式？(HTML,CSS)

阿华AIGC实验室

2026-5-9

解决自定义光标在特定元素上失效的问题

我清楚你的问题——你已经为页面设置了两种自定义鼠标光标（常态是面部样式，点击时切换为张嘴样式），但当鼠标悬浮在某些元素（比如那些甜甜圈对应的.images容器、里面的label或图片）上时，自定义光标就消失了，变回了浏览器默认样式。

问题根源

浏览器的默认样式表中，很多元素（比如<img>、<label>这类交互元素）本身自带cursor属性值（比如图片默认是pointer或default）。当鼠标悬浮在这些元素上时，它们自身的cursor设置会优先于你给<body>设置的规则，导致自定义光标被覆盖。

解决方案

我们需要让页面上所有元素都继承<body>的自定义光标设置，或者直接给所有元素应用光标规则，覆盖它们的默认样式。这里推荐用继承的方式，更灵活易维护：

修改你的CSS代码，添加全局继承规则：

body {
  height: 100vh;
  cursor: url('../images/cursor3.png'), auto;
  background-image: url(../images/backgroundDonuts.jpg);
}

body:active {
  cursor: url('../images/cursor3-eat.png'), auto;
}

/* 关键：让所有元素继承body的光标设置，覆盖默认样式 */
* {
  cursor: inherit;
}

/* 下面保留你原有的其他CSS规则 */
.title { 
  font-family: 'Gloria Hallelujah', cursive; 
  position: absolute; 
  top: 2%; 
  left: 41%; 
  text-align: center; 
  color: yellow; 
  text-shadow: -1px 3px 3px black; 
  animation-name: eat; 
  animation-timing-function: ease-in-out; 
  animation-iteration-count: infinite; 
  animation-duration: 2.5s; 
}

@keyframes eat{ 0% { transform: scale(1); } 50% { transform: scale(2); } 100% { transform: scale(1); } }
.micro { position: absolute; top: 61.7%; left: 11.8%; transform: rotate(-14deg); font-size: 50%; font-family: Arial, Helvetica, sans-serif; color: red; animation-name: micro; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 1s; }
@keyframes micro{ 0% {opacity: 0%;} 50% {opacity: 100%;} 100% {opacity: 0%;} }
.run { width: 5%; top: 45%; left: 41%; position: absolute; animation-name: run; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 3s; }
@keyframes run { 0% {transform: translateX(0px); transform: rotateX(0px)} 50% {transform: translateX(120px); transform: rotateY(0px);} 75% {transform: translateX(80px); transform: rotateY(180deg);} 100% {transform: translateX(0px);} }
.kitchen { position: absolute; top: 28px; left: 80px; height: 90%; width: 90%; }
.lightbox { position: absolute; top: 28px; left: 80px; height: 90%; width: 90%; animation-name: glow; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
@keyframes glow{ 0% {opacity: 0%;} 50% {opacity: 50%;} 100% {opacity: 0%;} }
input[type="radio"] { display: none; counter-increment: unchecked-sum; }
input[type="radio"]:checked + label { display: none; counter-increment: checked-sum; }
.images { position: absolute; left: 0; top: 0; z-index: 1; }
.do1 { top: 67%; left: 50%; }
.do2 { top: 60%; left: 15%; }
.do3{ top: 55%; left: 70%; }
.do4{ top: 23.5%; left: 75%; }
.do5{ top: 21%; left: 28%; }

原理说明

*是CSS通配符选择器，会匹配页面上所有元素。
cursor: inherit让所有元素继承父元素（最终是<body>）的cursor属性值，这样不管鼠标悬浮在哪个元素上，都会使用你定义的自定义光标。
当你点击页面时，<body:active>的光标规则会生效，所有元素也会继承这个点击状态下的光标，保持张嘴样式。

如果之后你需要给某个特定元素设置不同的光标（比如按钮需要pointer），只需要单独给该元素写cursor规则即可，它会覆盖全局的继承设置。

内容的提问来源于stack exchange，提问作者tommen