我在CSS中使光标变小了,当我发现尝试单击功能时我注意到,必须将光标至少高出2cm才能单击该对象。我无法弄清楚我做错了什么,使它像这样错位。这是我的光标代码。
.cursor {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-transform: translateZ(0) scale(0.11);
transform: translateZ(0) scale(0.11);
-webkit-transition: transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
transform-origin: center;
opacity: 0;
height: 50px;
width: 50px;
}
.show-cursor .cursor {
background-color: {{ theme.button_background_color }};
border-radius: 50%;
color: {{ theme.button_text_color }};
font-family: {{ theme.secondary_font | font_family }};
font-size: 12px;
line-height: 50px;
opacity: 1;
pointer-events: none;
position: fixed;
text-align: center;
z-index: 1000;
}
.show-cursor .cursor .cursor-text {
font-size: 0px;
line-height: 20px;
opacity: 0;
}
.show-cursor .cursor.expanded {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: height 0.2s ease-in-out width 0.2s ease-in-out;
transition: height 0.2s ease-in-out width 0.2s ease-in-out;
}
.show-cursor .cursor.expanded .cursor-text {
font-size: 12px;
opacity: 1;
}
.show-cursor .cursor.small-expanded {
-webkit-transform: scale(0.15);
transform: scale(0.15);
-webkit-transition: height 0.2s ease-in-out width 0.2s ease-in-out;
transition: height 0.2s ease-in-out width 0.2s ease-in-out;
}