如何通過懸停<a>來禁用游標縮放-有解無憂

代碼示例https://codesandbox.io/s/reverent-thompson-bw3y3?file=/index.html

我有一個自定義游標：在此處輸入影像描述

當我在它上面誘導時，我的游標在此處輸入影像描述，但是當我在另一個標簽中誘導時，我的游標不會改變他的大小，在此處輸入影像描述

通過懸停特殊課程來更改我的課程視圖.link

如何禁用默認樣式？

ps：

a {
  text-decoration: none;
  pointer-events: none;
  cursor: default;
 }

不作業

uj5u.com熱心網友回復：

將此代碼添加到 CSS 部分以覆寫指標（游標）的行內樣式

.ppk-dot-outline, .ppk-dot {
  transform: translate3d(-50%, -50%, 0) !important;
}

解決此問題的其他方法是更新 JS（更正確的方法）：

...
  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 onMouseOver = () => {
  setDisplayStyle("mask0_1468_24", "block");
  setDisplayStyle("g0_1468_24", "block");
  curCursor.map((cursor) => (cursor.style.display = "none"));
};
let onMouseOut = () => {
  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 class="link">Hello, world!</h1>
        <p>#2</p>
        <p>links</p><br><a class="link">link for download 1</a><a class="link">link for download 2</a><a class="link">link for download 3</a>
        <p>link 4<a class="link">link for download 4</a></p>
        <div class="ppk-dot-outline"></div>
        <div class="ppk-dot"><svg class="cursor" 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 class="curCursor" d="M0.721592 0.187758L3.39107 19.1209L7.80693 12.4599L0.721592 0.187758Z" fill="white"></path>
                <path class="curCursor" 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/422193.html

標籤：

上一篇：使用表格的單元格大小縮放按鈕內的影像-引導程式

下一篇：無法使用此滑動效果獲得更大的字體