如何使每个按钮在其旁边显示其各自的文本，当悬停并仍然应用类型 animation
[英]how to make every button have its respective text appear next to it, when hovered and still apply the type animation
问题描述
const navList = document.getElementById("navigation"); const hoveredHome = document.querySelector(".nav_home"); const hoveredAbout = document.querySelector(".nav_about"); const hoveredSkills = document.querySelector(".nav_skills"); const hoveredContact = document.querySelector(".nav_contact"); const texts = [' // Home']; const text2 = [' // About'] let count = 0; // counts the individual characters in array numbers let characters = 0; // counts the individual letters/characters let currentWord = ''; let letter = ''; //specifies individual letter, one by one function typing() { // currentWord needs to change depending on what button is hovered currentWord = texts[count]; letter = currentWord.slice(0, ++characters); //adds one character at a time document.querySelector(".nav_home").textContent = letter; //adds letter setTimeout(typing, 50); }; document.querySelector(".hovered").addEventListener('mouseover', typing);
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <nav id="navigation"> <div class="length_size"><a href="#"><div class="hovered"><i class="fas fa-home"></div></i><p class="nav_home"></p></a></div> <div class="length_size"><a href="#"><div class="hovered"><i class="fas fa-question-circle"></div></i><p class="nav_about"></p></a></div> <div class="length_size"><a href="#"><div class="hovered"><i class="fas fa-code"></i></div><p class="nav_skills"></p></a></div> <div class="length_size"><a href="#"><div class="hovered"><i class="fas fa-envelope"></div></i><p class="nav_contact"></p></a></div> <div class="length_size"><a href="#"><div class="hovered"><i class="fas fa-blog"></i></div><p class="nav_blog"></p></a></div> </nav> </div> </div> <script src="./javaScript/navAnimate.js"></script> </body> Edited question, im trying to make it so when the icons are hovered text appears next to them, and eventually when they are not hovered the text dissapears.
编辑过的问题，我试图让它在图标悬停时出现在它们旁边，最终当它们没有悬停时，文本消失。
1 个解决方案
解决方案1
0 2021-04-28 21:36:31
You don't need javascript at all.您根本不需要 javascript。 You can do this with pure CSS - in only one line (once you do the initial styling) .你可以用纯 CSS 做到这一点 - 只需一行（一旦你做了初始样式） 。 This is the one line that does the work:这是完成工作的一行：
a:hover .nav_text{display:block;}
a{display:flex;min-height:50px;}.nav_text{display:none;}.hovered{display:flex;align-items:center;padding-right:5px;} #navigation a:hover.nav_text{display:block;}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <nav id="navigation"> <div class="length_size"><a href="#"><div class="hovered"><i class="fas fa-home"></i></div><p class="nav_text">Home</p></a></div> <div class="length_size"><a href="#"><div class="hovered"><i class="fas fa-question-circle"></i></div><p class="nav_text">Aboot, eh?</p></a></div> <div class="length_size"><a href="#"><div class="hovered"><i class="fas fa-code"></i></div><p class="nav_text">Skills</p></a></div> <div class="length_size"><a href="#"><div class="hovered"><i class="fas fa-envelope"></i></div><p class="nav_text">Contact</p></a></div> <div class="length_size"><a href="#"><div class="hovered"><i class="fas fa-blog"></i></div><p class="nav_text">Blog</p></a></div> </nav> </div> </div> </body>
However, if you wanted to do it with javascript, here's the code that would make this work for you:然而，如果你想用 javascript 来做，这里的代码会让你工作：
//Look closely - this is NOT jQuery //const $ = document.querySelector.bind(document); //<== not needed in _this_ example const $$ = document.querySelectorAll.bind(document); const links = $$('#navigation.hovered'); $$('#navigation a').forEach(link => { link.addEventListener('mouseover', evt => { const atag = evt.target.closest('a'); const ntxt = atag.getElementsByClassName('nav_text'); ntxt[0].style.display = 'block'; }); link.addEventListener('mouseout', evt => { const atag = evt.target.closest('a'); const ntxt = atag.getElementsByClassName('nav_text'); ntxt[0].style.display = 'none'; }); });
#navigation a{display:flex;min-height:50px;}.nav_text{display:none;}.hovered{display:flex;align-items:center;padding-right:5px;}.nav_show{display:block;}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <nav id="navigation"> <div class="length_size"><a href="#"><div class="hovered"><i class="fas fa-home"></i></div><p class="nav_text nav_home">Home</p></a></div> <div class="length_size"><a href="#"><div class="hovered"><i class="fas fa-question-circle"></i></div><p class="nav_text nav_about">Aboot, eh?</p></a></div> <div class="length_size"><a href="#"><div class="hovered"><i class="fas fa-code"></i></div><p class="nav_text nav_skills">Skills</p></a></div> <div class="length_size"><a href="#"><div class="hovered"><i class="fas fa-envelope"></i></div><p class="nav_text nav_contact">Contact</p></a></div> <div class="length_size"><a href="#"><div class="hovered"><i class="fas fa-blog"></i></div><p class="nav_text nav_blog">Blog</p></a></div> </nav> </div> </div> </body>
You might already know this, but please note that I prefixed several element tagNames/classNames with #navigation just to ensure that the correct a tags or .hovered elements were selected (in case you had others elsewhere on your page - quite likely with the a tag).您可能已经知道这一点，但请注意，我在几个元素 tagNames/classNames 前加上#navigation只是为了确保选择了正确a标签或.hovered元素（以防您页面上的其他地方有其他元素 - 很可能使用 a标签）。 If you added class names to the a tags (and used the className instead of a , and ensured that the .hovered className was truly unique, you would not need the #navigation selector.如果您将 class 名称添加到a标签（并使用 className 而不是a ，并确保.hovered className 真正唯一，则不需要#navigation选择器。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何使文本显示在javascript类型的写作效果的下一行中 - How to make text appear in next line in javascript type writing effect
如何在鼠标悬停时使按钮可点击 - How to make a button clickabled when hovered over
如何使div出现在悬停时，在jQuery或CSS中悬停时停留 - How to make a div that appear on hover, stay while its hovered on in jquery or css
将鼠标悬停在该按钮上会显示div。 如何在出现的div上使按钮保持悬停？ - Hovering the button makes appear div. How to make the button stay hovered while being on the appeared div?
在制作动画的同时如何使按钮具有圆角？ - How do I make the button have rounded corners while still doing the animation?
单击按钮时如何滚动到元素并使其悬停？ - How to scroll to an element when a button is clicked and also make it hovered?
元素A放置在元素B上。无论如何，当将鼠标悬停在元素A上时，使页面看起来元素B仍在悬停吗？ - Element A is positioned over Element B. Anyway, when hovering over Element A, make the page appear that Element B is still being hovered over?
有没有办法使 <td> 选择按钮后出现 <td> 显示是没有？ （该 <td> 将在其中具有codeMirror文本区域） - Is there a way to make a <td> appear when a button is selected and the <td> display is none? (The <td> will have a codeMirror text area in it)
单击注入 HTML 的按钮时，如何使 div 内容显示动画？ - How can i make div content appear with animation when clicking a button that injects HTML?
Jquery动画：如何在元素更改颜色或样式时显示文本 - Jquery Animation : how to make text appear when a element has changed color or styles
相关标签