code example https://codesandbox.io/s/reverent-thompson-bw3y3?file=/index.html
I have a custom cursor: enter image description here
and when I induced on it scaled my cursor enter image description here, but when I induced in another tag my cursor doesn't change his size enter image description here
view of my courses changes by hovering special class .link
How can I disabling default styles?
ps:
a {
text-decoration: none;
pointer-events: none;
cursor: default;
}
doesn't work
CodePudding user response：
Add this code to CSS part to override inline styling of pointer (cursor)
.ppk-dot-outline, .ppk-dot {
transform: translate3d(-50%, -50%, 0) !important;
}
Other way to fix this issue, is to update JS (more proper way):
...
toggleCursorSize: function () {
var self = this;
// remove transform: scale at all
if (self.cursorEnlarged) {
self.$dot.style.transform = "translate3d(-50%, -50%, 0)";
self.$outline.style.transform = "translate3d(-50%, -50%, 0)";
} else {
self.$dot.style.transform = "translate3d(-50%, -50%, 0)";
self.$outline.style.transform = "translate3d(-50%, -50%, 0)";
}
},
...
var cursor = {
delay: 8,
_x: 0,
_y: 0,
endX: window.innerWidth / 2,
endY: window.innerHeight / 2,
cursorVisible: true,
cursorEnlarged: false,
$dot: document.querySelector(".ppk-dot"),
$outline: document.querySelector(".ppk-dot-outline"),
init: function () {
// Set up element sizes
this.dotSize = this.$dot.offsetWidth;
this.outlineSize = this.$outline.offsetWidth;
this.setupEventListeners();
this.animateDotOutline();
console.log(this.$dot);
console.log(this.$outline);
},
setupEventListeners: function () {
var self = this;
// Anchor hovering
document.querySelectorAll("a").forEach(function (el) {
el.addEventListener("mouseover", function () {
self.cursorEnlarged = true;
self.toggleCursorSize();
});
el.addEventListener("mouseout", function () {
self.cursorEnlarged = false;
self.toggleCursorSize();
});
});
// Click events
document.addEventListener("mousedown", function () {
self.cursorEnlarged = true;
self.toggleCursorSize();
});
document.addEventListener("mouseup", function () {
self.cursorEnlarged = false;
self.toggleCursorSize();
});
document.addEventListener("mousemove", function (e) {
// Show the cursor
self.cursorVisible = true;
self.toggleCursorVisibility();
// Position the dot
self.endX = e.pageX;
self.endY = e.pageY;
self.$dot.style.top = self.endY "px";
self.$dot.style.left = self.endX "px";
});
// Hide/show cursor
document.addEventListener("mouseenter", function (e) {
self.cursorVisible = true;
self.toggleCursorVisibility();
self.$dot.style.opacity = 1;
self.$outline.style.opacity = 1;
});
document.addEventListener("mouseleave", function (e) {
self.cursorVisible = true;
self.toggleCursorVisibility();
self.$dot.style.opacity = 0;
self.$outline.style.opacity = 0;
});
},
animateDotOutline: function () {
var self = this;
self._x = (self.endX - self._x) / self.delay;
self._y = (self.endY - self._y) / self.delay;
self.$outline.style.top = self._y "px";
self.$outline.style.left = self._x "px";
requestAnimationFrame(this.animateDotOutline.bind(self));
},
toggleCursorSize: function () {
var self = this;
// remove transform: scale at all
if (self.cursorEnlarged) {
self.$dot.style.transform = "translate3d(-50%, -50%, 0)";
self.$outline.style.transform = "translate3d(-50%, -50%, 0)";
} else {
self.$dot.style.transform = "translate3d(-50%, -50%, 0)";
self.$outline.style.transform = "translate3d(-50%, -50%, 0)";
}
},
toggleCursorVisibility: function () {
var self = this;
if (self.cursorVisible) {
self.$dot.style.opacity = 1;
self.$outline.style.opacity = 1;
} else {
self.$dot.style.opacity = 0;
self.$outline.style.opacity = 0;
}
}
};
cursor.init();
let links = Array.from(document.getElementsByClassName("link"));
let curCursor = Array.from(document.getElementsByClassName("curCursor"));
function setDisplayStyle(id, style) {
document.getElementById(id).style.display = style;
}
let onm ouseOver = () => {
setDisplayStyle("mask0_1468_24", "block");
setDisplayStyle("g0_1468_24", "block");
curCursor.map((cursor) => (cursor.style.display = "none"));
};
let onm ouseOut = () => {
setDisplayStyle("mask0_1468_24", "none");
setDisplayStyle("g0_1468_24", "none");
curCursor.map((cursor) => (cursor.style.display = "block"));
};
links.map((link) => {
link.onmouseover = onm ouseOver;
link.onmouseout = onm ouseOut;
});a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;font-size:100%;vertical-align:baseline}
a {
text-decoration: none;
}
a:active,
a:hover {
outline: 0;
}
ul,
li {
list-style-type: none;
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:focus {
outline: 0;
}
img,
audio,
video {
max-width: 100%;
height: auto;
}
audio,
canvas,
iframe,
video,
img,
svg {
vertical-align: middle;
}
iframe {
border: 0;
}
textarea {
resize: none;
overflow: auto;
vertical-align: top;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
input,
textarea,
select,
button {
outline: none;
border: none;
font-size: 100%;
margin: 0;
}
button,
input {
line-height: normal;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
text-align: left;
}
*,
*:before,
*:after {
cursor: none;
}
.ppk-dot,
.ppk-dot-outline {
z-index: 999;
pointer-events: none;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
opacity: 0;
}
#g0_1468_24 {
display: none;
}
#mask0_1468_24 {
display: none;
}
#white-line {
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
transform: rotate(-30deg);
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#red-line {
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
transform: rotate(-30deg);
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#blue-line {
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
transform: rotate(-30deg);
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
:root {
font-size: 20px;
color: #fff;
background-color: #000;
}
.link {
color: red;
}
a {
text-decoration: none;
}
/*# sourceMappingURL=sourcemaps/styles.min.css.map */<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link href="style.css" rel="stylesheet" />
<title>StaticTemplate</title>
</head>
<body>
<div id="app">
<h1 >Hello, world!</h1>
<p>#2</p>
<p>links</p><br><a >link for download 1</a><a >link for download 2</a><a >link for download 3</a>
<p>link 4<a >link for download 4</a></p>
<div ></div>
<div ><svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_1468_24" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="22">
<path d="M0.721592 0.187758L3.39107 19.1209L7.80693 12.4599L15.7835 11.9661L0.721592 0.187758Z" fill="blue" />
</mask>
<g id="g0_1468_24" mask="url(#mask0_1468_24)" fill="blue">
<rect id="white-line" x="-15" y="-6" width="40" height="40" fill="#FEFEFE"></rect>
<rect id="red-line" x="4" y="-6" width="5" height="40" fill="#FF4B1C"></rect>
<rect id="blue-line" x="-1" y="-2" width="5" height="40" fill="#06FFFF"></rect>
</g>
<path d="M0.721592 0.187758L3.39107 19.1209L7.80693 12.4599L0.721592 0.187758Z" fill="white"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.721592 0.187758L7.80693 12.4599L15.7835 11.9661L0.721592 0.187758ZM13.092 11.1308L8.36331 11.4235L4.16296 4.14829L13.092 11.1308Z" fill="#00FFFF"></path>
</svg></div>
</div>
<script src="index.js"></script>
</html>