如何在锚标记悬停时添加 class

Question

我已将自定义光标添加到我的网站，但我不知道如何更改锚标记的 mouseenter/mouseleave 上的光标样式。使用 .getElementsbyClassName 时，我只能让它在第一个锚标记上工作。我正在尝试将 .cursor-hover 应用于 .cursor 并将 .cursor-outline-hover 应用于 mouseenter 上的 .cursor-outline 并删除 mouseleave.

上的样式

const cursor = document.querySelector('.cursor');
const cursor_outline = document.querySelector('.cursor-outline');

document.addEventListener('mousemove', e => {
  cursor.setAttribute("style", "top: "+(e.pageY - 5)+"px; left: "+(e.pageX - 5)+"px;");
})

document.addEventListener('mousemove', e => {
  cursor_outline.setAttribute("style", "top: "+(e.pageY - 25)+"px; left: "+(e.pageX - 25)+"px;");
})

document.addEventListener('click', () => {
  cursor.classList.add("cursor-click");

  setTimeout(() => {
    cursor.classList.remove("cursor-click");
  }, 300)
})

html {
  font-family: Helvetica, Arial, sans-serif;
}

body {
  background-color: #2E1C33;
  position: relative;
}

body,
html {
  margin: 0;
  padding: 0;
}

* {
  cursor: none;
  box-sizing: border-box;
}

.cursor,
.cursor-outline {
  pointer-events: none;
}

.cursor {
  width: 10px;
  height: 10px;
  background-color: #35E8C6;
  border-radius: 50%;
  position: absolute;
  z-index: 300;
}

.cursor-outline {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: black;
  border-radius: 50%;
  opacity: 0.5;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
  z-index: 290;
}

.cursor-click {
  background: #FF5869;
  animation: cursor-clickAnim 0.6s forwards;
}

@keyframes cursor-clickAnim {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.8);
  }
}

.cursor-outline-hover {
  background-color: rgba(255, 255, 255, 0);
  transform: scale(1.3);
  border: 1px solid white;
  opacity: 1;
}

.cursor-hover {
  background-color: white;
}

a {
  text-decoration: none;
  color: white;
}

a:hover {
  text-decoration: none;
}

section {
  margin: 0;
  padding: 0;
  padding: 0 15em;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  color: white;
  display: flex;
  align-items: center;
}

p {
  font-size: 1.5em;
  letter-spacing: 0.05em;
  line-height: 1.8;
  color: #F4CEFF;
}

h1 {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.3em;
  font-size: 4em;
  line-height: 1.5;
  margin-bottom: 0.3em;
  margin-top: 0;
}

h2,
h3 {
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.4em;
  font-size: 1.2em;
  color: #35E8C6;
}

h3 {
  color: white;
}

h4 {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.4em;
  font-size: 6em;
  margin: 1em 0;
  padding: 0;
}

.hero {
  display: flex;
  align-items: center;
}

.hero-inner h1 {
  margin-top: 0;
}

.hero h2 {
  font-family: 'Playfair-Display', 'Times', serif;
  text-transform: none;
  font-style: italic;
  font-weight: 500;
  font-size: 2em;
  margin: 0;
  letter-spacing: normal;
  color: white;
}

.btn-pill {
  text-decoration: none;
  color: #17473E;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 45px;
  display: inline-block;
  background-color: #35E8C6;
  border-radius: 100em;
  width: 220px;
  text-align: center;
  letter-spacing: 0.1em;
  border: 2px solid #35E8C6;
  margin-top: 4em;
}

.btn-pill:hover,
.btn-alt:active,
.btn-alt:focus {
  background-color: #004E51;
  color: white;
}

.btn-main:hover,
.btn-main:active,
.btn-main:focus {
  background-color: #0A9F86;
  border: 2px solid #0A9F86;

}

.btn:focus,
.btn:active {
  outline: none;
  box-shadow: none;
}

.btn-alt {
  border: 2px solid #FF5869;
  background: none;
  color: #FF5869;
}

.btn-alt:hover,
.btn-alt:active,
.btn-alt:focus {
  background-color: #FF5869;
  color: #fff;
  box-shadow: none;
}

.hero .btn-alt {
  margin-left: 2em;
}

.hero .btn-main {
  display: inline-block;
  margin-right: 0.9em;
}

.hero-inner a i {
  font-size: 1.5em;
  vertical-align: middle;
  padding-left: 8px;
}

<html lang="en">
  <head>
    <link href="css/style.css" rel="stylesheet">
  </head>

  <body>
    <div class="cursor"></div>
    <div class="cursor-outline"></div>

    <section class="hero">

      <div class="hero-inner">

        <a type="button" href="" class="btn-primary btn-pill btn-main hover-item">Learn More</a>
        <a type="button" href="" class="btn-primary btn-pill btn-alt hover-item">Contact <i class="fas fa-long-arrow-alt-right"></i></a>
      </div>
    </section>
    <script type="text/javascript" src="js/script.js"></script>

  </body>

</html>

如有任何帮助，我们将不胜感激。

Answer 1

我们可以像这样向每个 a 标签添加事件：

（请注意，我们使用扩展运算符和 querySelectorAll 创建了一个包含所有 a 标签元素的数组，然后我们将该数组重新分配（这就是我们使用 let 而不是 const 的原因）该数组经过修改后的副本 - 即相同的数组，但每个元素现在也附加了两个事件侦听器。我们通过在数组上使用 map 函数来做到这一点——这不会改变数组，因此需要重新分配）

let a_tags = [...document.querySelectorAll('a')];

a_tags = a_tags.map((child,index) => {
  child.addEventListener('mouseover', (e) => {
    console.log(e.target);
    //Do something here with either the a tag or the cursor etc.
    //e.g.
    cursor.setAttribute('class', 'cursor-hover');
    cursor_outline.setAttribute('class', 'cursor-outline-hover');
  })
  child.addEventListener('mouseout', (e) => {
    console.log(e.target);
    //Do something here with either the a tag or the cursor etc.
    //e.g.
    cursor.setAttribute('class', 'cursor');
    cursor_outline.setAttribute('class', 'cursor-outline');
  })
  return child;
})

对你有帮助吗？您只需要将注释下方的代码替换为您确实想要更改光标 and/or 标签等？（我想我从你的问题中明白了，但我不是 100% 确定）

const cursor = document.querySelector('.cursor');
const cursor_outline = document.querySelector('.cursor-outline');

document.addEventListener('mousemove', e => {
  cursor.setAttribute("style", "top: "+(e.pageY - 5)+"px; left: "+(e.pageX - 5)+"px;");
})

document.addEventListener('mousemove', e => {
  cursor_outline.setAttribute("style", "top: "+(e.pageY - 25)+"px; left: "+(e.pageX - 25)+"px;");
})

document.addEventListener('click', () => {
  cursor.classList.add("cursor-click");

  setTimeout(() => {
    cursor.classList.remove("cursor-click");
  }, 300)
})

let a_tags = [...document.querySelectorAll('a')];

a_tags = a_tags.map((child,index) => {
  child.addEventListener('mouseover', (e) => {
    console.log(e.target);
    //Do something here with either the a tag or the cursor etc.
    //e.g.
    cursor.setAttribute('class', 'cursor-hover');
    cursor_outline.setAttribute('class', 'cursor-outline-hover');
  })
  child.addEventListener('mouseout', (e) => {
    console.log(e.target);
    //Do something here with either the a tag or the cursor etc.
    //e.g.
    cursor.setAttribute('class', 'cursor');
    cursor_outline.setAttribute('class', 'cursor-outline');
  })
  return child;
})

html {
  font-family: Helvetica, Arial, sans-serif;
}

body {
  background-color: #2E1C33;
  position: relative;
}

body,
html {
  margin: 0;
  padding: 0;
}

* {
  cursor: none;
  box-sizing: border-box;
}

.cursor,
.cursor-outline {
  pointer-events: none;
}

.cursor {
  width: 10px;
  height: 10px;
  background-color: #35E8C6;
  border-radius: 50%;
  position: absolute;
  z-index: 300;
}

.cursor-outline {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: black;
  border-radius: 50%;
  opacity: 0.5;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
  z-index: 290;
}

.cursor-click {
  background: #FF5869;
  animation: cursor-clickAnim 0.6s forwards;
}

@keyframes cursor-clickAnim {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.8);
  }
}

.cursor-outline-hover {
  background-color: rgba(255, 255, 255, 0);
  transform: scale(1.3);
  border: 1px solid white;
  opacity: 1;
}

.cursor-hover {
  background-color: white;
}

a {
  text-decoration: none;
  color: white;
}

a:hover {
  text-decoration: none;
}

section {
  margin: 0;
  padding: 0;
  padding: 0 15em;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  color: white;
  display: flex;
  align-items: center;
}

p {
  font-size: 1.5em;
  letter-spacing: 0.05em;
  line-height: 1.8;
  color: #F4CEFF;
}

h1 {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.3em;
  font-size: 4em;
  line-height: 1.5;
  margin-bottom: 0.3em;
  margin-top: 0;
}

h2,
h3 {
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.4em;
  font-size: 1.2em;
  color: #35E8C6;
}

h3 {
  color: white;
}

h4 {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.4em;
  font-size: 6em;
  margin: 1em 0;
  padding: 0;
}

.hero {
  display: flex;
  align-items: center;
}

.hero-inner h1 {
  margin-top: 0;
}

.hero h2 {
  font-family: 'Playfair-Display', 'Times', serif;
  text-transform: none;
  font-style: italic;
  font-weight: 500;
  font-size: 2em;
  margin: 0;
  letter-spacing: normal;
  color: white;
}

.btn-pill {
  text-decoration: none;
  color: #17473E;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 45px;
  display: inline-block;
  background-color: #35E8C6;
  border-radius: 100em;
  width: 220px;
  text-align: center;
  letter-spacing: 0.1em;
  border: 2px solid #35E8C6;
  margin-top: 4em;
}

.btn-pill:hover,
.btn-alt:active,
.btn-alt:focus {
  background-color: #004E51;
  color: white;
}

.btn-main:hover,
.btn-main:active,
.btn-main:focus {
  background-color: #0A9F86;
  border: 2px solid #0A9F86;

}

.btn:focus,
.btn:active {
  outline: none;
  box-shadow: none;
}

.btn-alt {
  border: 2px solid #FF5869;
  background: none;
  color: #FF5869;
}

.btn-alt:hover,
.btn-alt:active,
.btn-alt:focus {
  background-color: #FF5869;
  color: #fff;
  box-shadow: none;
}

.hero .btn-alt {
  margin-left: 2em;
}

.hero .btn-main {
  display: inline-block;
  margin-right: 0.9em;
}

.hero-inner a i {
  font-size: 1.5em;
  vertical-align: middle;
  padding-left: 8px;
}

<html lang="en">
  <head>
    <link href="css/style.css" rel="stylesheet">
  </head>

  <body>
    <div class="cursor"></div>
    <div class="cursor-outline"></div>

    <section class="hero">

      <div class="hero-inner">

        <a type="button" href="" class="btn-primary btn-pill btn-main hover-item">Learn More</a>
        <a type="button" href="" class="btn-primary btn-pill btn-alt hover-item">Contact <i class="fas fa-long-arrow-alt-right"></i></a>
      </div>
    </section>
    <script type="text/javascript" src="js/script.js"></script>

  </body>

</html>

如何在锚标记悬停时添加 class

How to add a class on hover of an anchor tag

javascript

html

hover

cursor

mouseover