javascript - 如何在 anchor 标记悬停时添加类

标签 javascript html hover cursor mouseover

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

任何帮助将不胜感激。

最佳答案

我们可以向每个标签添加事件，如下所示:

(注意，我们使用展开运算符和 querySelectorAll 创建所有 a 标记元素的数组，然后我们重新分配(这就是我们使用 let 而不是 const 的原因)该数组到经过修改的该数组的副本 - 即相同数组，但现在每个元素还附加了两个事件监听器。我们通过在数组上使用映射函数来完成此操作 - 这不会就地更改数组，因此需要重新分配)

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;
})

这对你有帮助吗？您只需要替换注释下面的代码，但是您确实想更改光标和/或标签等？ (我想我从你的问题中理解了，但我不是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>

关于javascript - 如何在 anchor 标记悬停时添加类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60650415/

上一篇：javascript - 为什么我的表格在单击一行时没有响应

下一篇：javascript - Firebase 函数返回

相关文章：

javascript - 将数组作为查询字符串传递

javascript - 将 infoBox 替换为 jquery 对话框模式窗口

html - 响应式 4x4 CSS 网格

java - 如何在 Piccolo2D 中实现悬停行为？

javascript - 如何将 JSON 对象/模型添加到 Whitestorm.js 世界/场景中？

Javascript:location.replace 和 CSS 类

html - 如何使用 Perl 去除字符串中的 HTML？

android - PhoneGap - 在 Samsung Galaxy Tab 10.1 上键盘使屏幕变黑并闪烁一段时间

jQuery - 动态添加元素的 on() 问题

html - 悬停时下拉菜单消失(Firefox)

©2024 IT工具网  联系我们