所以我有两个自定义鼠标光标，我想一直保留。第一个光标是一张脸，第二个光标是张着嘴的脸，当用户点击时，它会切换到第二个。我的问题是，当用户悬停在某个对象上时，比如div类，那么自定义光标就会消失，并恢复为默认光标。我该如何解决这个问题？
光标的代码在我的CSS文档中。
屏幕截图：https://i.stack.imgur.com/zRDmk.jpg，https://i.stack.imgur.com/VofX2.jpg，https://i.stack.imgur.com/CzBTf.jpg
body {
height: 100vh;
cursor: url('../images/cursor3.png'), auto;
background-image: url(../images/backgroundDonuts.jpg);
}
body:active {
height: 100vh;
cursor: url('../images/cursor3-eat.png'), auto;
}
.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%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eat the donuts!</title>
<link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/spillside.css">
</head>
<body>
<div class="container">
<img src="../images/background-page2-new.png" class="kitchen" draggable="false">
<img src="../images/homer-run.gif" class="run" draggable="false">
<img src="../images/light.png" class="lightbox" draggable="false">
<div class="text">
<h1 class="title">Eat all the donuts!</h1>
<p class="micro">ready</p>
</div>
</div>
<section>
<div class="images do1">
<input type="radio" id="donut1">
<label for="donut1"><img src="../images/donut-final.png"></label>
</div>
<div class="images do2">
<input type="radio" id="donut2">
<label for="donut2"><img src="../images/donut-final.png"></label>
</div>
<div class="images do3">
<input type="radio" id="donut3">
<label for="donut3"><img src="../images/donut-final.png"></label>
</div>
<div class="images do4">
<input type="radio" id="donut4">
<label for="donut4"><img src="../images/donut-final.png"></label>
</div>
<div class="images do5">
<input type="radio" id="donut5">
<label for="donut5"><img src="../images/donut-final.png"></label>
</div>
</section>
</body>
</html>在CSS下面为我一直使用的默认光标覆盖。我添加了您的游标作为示例(但无法测试它是否有效(，根据需要对其进行修改。
/*****************************/
/* Global cursor preferences */
/*****************************/
body { cursor: default; cursor: url('../images/cursor3.png'), auto }
input { cursor: auto } /* Use a custom cursor, except on: */
input[list="datalist"],
input[type="button" ],
input[type="checkbox"],
input[type="radio" ],
input[type="color" ],
input[type="range" ],
input[type="reset" ],
input[type="file" ],
input[type="submit" ],
label:not([for=""]),
a,button,select,keygen { cursor: pointer }
[contenteditable="true"] { cursor: text }
您可以使用通用选择器*使其适用于每个：hover元素(显然您只需要更改您的url(：
body *:hover{
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png'), auto;
}
body:active *:hover{
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/sad.png'), auto;
}
DEMO(只需单击即可查看活动(
body {
height: 100vh;
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png'), auto;
background-image: url('https://cdn.pixabay.com/photo/2020/01/14/10/55/cartoon-4764725_960_720.png');
}
body:active {
height: 100vh;
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/sad.png'), auto;
}
.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%;
}
section img{
max-width: 40px;
}
body *:hover{
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png'), auto;
}
body:active *:hover{
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/sad.png'), auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eat the donuts!</title>
<link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/spillside.css">
</head>
<body>
<div class="container">
<img src="../images/background-page2-new.png" class="kitchen" draggable="false">
<img src="../images/homer-run.gif" class="run" draggable="false">
<img src="../images/light.png" class="lightbox" draggable="false">
<div class="text">
<h1 class="title">Eat all the donuts!</h1>
<p class="micro">ready</p>
</div>
</div>
<section>
<div class="images do1">
<input type="radio" id="donut1">
<label for="donut1"><img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png"></label>
</div>
<div class="images do2">
<input type="radio" id="donut2">
<label for="donut2"><img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png"></label>
</div>
<div class="images do3">
<input type="radio" id="donut3">
<label for="donut3"><img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png"></label>
</div>
<div class="images do4">
<input type="radio" id="donut4">
<label for="donut4"><img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png"></label>
</div>
<div class="images do5">
<input type="radio" id="donut5">
<label for="donut5"><img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png"></label>
</div>
</section>
</body>
</html>