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

【问题标题】：How to add a class on hover of an anchor tag如何在锚标记悬停时添加类
【发布时间】：2020-03-12 08:46:23
【问题描述】：

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

任何帮助将不胜感激。

【问题讨论】：

    标签： javascript html hover cursor mouseover


    【解决方案1】：

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

    （注意，我们使用扩展运算符和 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;
})

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

    【讨论】：

      猜你喜欢
      • 2017-01-04
      • 2015-03-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode