堆栈内存溢出
  简体   繁体   English

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

[英]How to add a class on hover of an anchor tag

 原文  2020-03-12 08:46:23  9   1    javascript/ html/ hover/ cursor/ mouseover

问题描述

I have added a custom cursor to my site but I cannot figure out how to change the cursor styles on mouseenter / mouseleave of an anchor tag.我在我的网站上添加了一个自定义光标，但我不知道如何更改锚标记的mouseenter / mouseleave上的光标样式。 I can only get it to work on the first anchor tag when using .getElementsbyClassName .使用.getElementsbyClassName时，我只能让它在第一个锚标记上工作。 I am trying to apply .cursor-hover to .cursor and .cursor-outline-hover to .cursor-outline on mouseenter and remove the styles on mouseleave .我想申请.cursor-hover到.cursor和.cursor-outline-hover到.cursor-outline上mouseenter和删除样式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 ai { 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>

Any help would be much appreciated.任何帮助将非常感激。

1 个解决方案

解决方案1
 0 已采纳  2020-03-12 08:57:56

we can add events to each a tag like this:我们可以像这样为每个标签添加事件：

(Note, we create an array of all a tag elements using spread operator and querySelectorAll, then we re-assign (that's why we used let and not const) that array to a copy of that array with modifications - ie the same array but with each element now also having two event listeners attached. We do this by using the map function on the array - which doesn't change the array in place, hence re-assignment needed) （注意，我们使用扩展运算符和 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;
})

Does that help you?这对你有帮助吗？ You just need to replace the code below the comments with however you exactly want to change the cursor and/or a tag etc?您只需要将注释下方的代码替换为您确实想要更改光标和/或标签等？ (I think I understood from your question but I am not 100% sure) （我想我从你的问题中明白了，但我不是 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. //eg 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. //eg 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 ai { 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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在锚标记中添加两种类样式 - How to add two class styles to anchor tag 如何通过jquery触发锚标记悬停？ - How to fire hover for anchor tag through jquery? 如何根据URL和Vanity URL将活动类添加到锚标记？ - How to add an active class to an anchor tag based on URL and Vanity URLs? 单击时如何在锚标签上添加活动 class？ - how to add active class on anchor tag when clicked? 如何在ul li中嵌套的锚标记中添加活动类 - How to add an active class in anchor tag nested in ul li 锚标签（悬停）和 JavaScript - Anchor Tag (hover) and JavaScript 使用jQuery在div的锚标记中添加类 - Add a class in an anchor tag within a div with jquery 如何在html中将锚标记添加到img标记中？ - How to add anchor tag to the img tag in html? 如何在锚标签 hover 上缩放我的自定义 cursor - How to scale my custom cursor on anchor tag hover 如果孩子有一个活跃的 class，将 class 添加到锚标记之前 - If child has an active class, add class to before anchor tag
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM