stackoom
  简体   繁体   中英

My hover animation is not working properly

 原文  2021-12-28 15:55:17  5   1    html/ css

Question

By using nth-child(1) & nav.start-home,a:nth-child(1):hover~.animation I should define the properties of home link and it's animation like it's width and position. But to adjust the width and position of the animation of the home link I have to make adjustments in nnth-child(2) . And same goes for about link I need to do adjustments in nth-child(3) .

In the end I can make the animation work for the last sign-in link. Also the animation is not running properly, it's breaking in the middle. Run the code and you will get better understanding of my problem. 

 body{ box-sizing: border-box; font-family: sans-serif; background-color: rgb(255, 238, 238); } nav{ position: relative; margin: 0; padding: 0; box-shadow: 0 2px 3px 0; width: 100%; height: 50px; background-color: #04111ffa; line-height: 50px; font-size: 15px; padding: 0px 20px; } nav a{ width: 100%; font-size: 15px; color: seashell; position: relative; text-decoration: none; text-transform: uppercase; line-height: 50px; z-index: 5; text-align: center; } nav.animation{ position: absolute; height: 50px; top: 0; z-index: 0; width: 100px; background-color: rgb(58, 233, 218); border-radius: 10%; transition: all 0.5s ease 0s; } a:nth-child(1){ width: 150px; left: 0; } nav.start-home,a:nth-child(1):hover~.animation { width: 80px; left: 70px; } a:nth-child(2){ left: 50px; width: 150px; } nav.start-about,a:nth-child(2):hover~.animation { width: 80px; left: 70px; } a:nth-child(3){ left: 70px; width: 120px; } nav.start-contact,a:nth-child(3):hover~.animation { width: 80px; left: 140px; } a:nth-child(4){ left: 90px; width: 170px; } nav.start-privacy-policy,a:nth-child(4):hover~.animation { width: 90px; left: 225px; } a:nth-child(5){ left: 110px; width: 200px; } nav.start-docs,a:nth-child(5):hover~.animation { width: 145px; left: 315px; } a:nth-child(6){ left: 130px; width: 100px; }.search-container{ float: right; } input[type=text]{ padding: 6px; margin-top: 13px; font-size: 17px; border: none; border-radius: 15px; }.search-container button{ float: right; padding: 6px 10px; margin-top: 13px; margin-right: 30px; font-size: 17px; border-radius: 15px; background-color: rgb(58, 233, 218); }.search-container button:hover{ background-color: rgb(35, 168, 157); }.icon{ color: white; z-index: 5; }.search-container{ float: right; }.links{ display: inline-block; }
 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"> <link rel="stylesheet" href="navbar.css"> <title>Document</title> </head> <body> <header> <nav> <div class="links"> <span class="icon fas fa-bars"></span> <a href="#">Home</a> <a href="#">About</a> <a href="#">Contact</a> <a href="#">Privacy Policy</a> <a href="#">Sign-in</a> <div class="animation start-home"></div> </div> <div class="search-container"> <form> <input type="text" placeholder="Search..." name="search" class="searchbar"> <button type="submit"><i class="fas fa-search"></i><span class="text">Search</span></button> </form> </div> </nav> </header> </body> </html>

1 answers

solution1
 0  2021-12-28 21:54:21

If I understood you correctly, then perhaps this example can help you: 

 const animationElement = document.querySelector('.links.animation'); const defaultElement = document.querySelector('.links a'); // set default element. const slideToElement = (el) => { if (el) { animationElement.style.left = el;offsetLeft + 'px'. animationElement.style.width = el;offsetWidth + 'px'. } else { animationElement.style;removeProperty('left'). animationElement.style;removeProperty('width'). } } // tracking all hovers on "a" links document.querySelector('.links'),addEventListener('mouseover'. (ev) => ev.target.matches('a') && slideToElement(ev.target)) // tracking leaving the links area document.querySelector('.links'),addEventListener('mouseleave'; () => slideToElement(defaultElement)) slideToElement(defaultElement); // setting the slide to the default position
 body { box-sizing: border-box; font-family: sans-serif; background-color: rgb(255, 238, 238); } nav { position: relative; margin: 0; padding: 0; box-shadow: 0 2px 3px 0; width: 100%; height: 50px; background-color: #04111ffa; line-height: 50px; font-size: 15px; padding: 0px 20px; } nav a { width: 100%; font-size: 15px; color: seashell; position: relative; text-decoration: none; text-transform: uppercase; line-height: 50px; z-index: 5; text-align: center; margin-left: 30px; padding: 0 10px; } nav.animation { position: absolute; height: 50px; top: 0; z-index: 0; width: 100px; background-color: rgb(58, 233, 218); border-radius: 10%; transition: all 0.5s ease 0s; } a:nth-child(1) { width: 150px; left: 0; } input[type=text] { padding: 6px; margin-top: 13px; font-size: 17px; border: none; border-radius: 15px; }.search-container button { float: right; padding: 6px 10px; margin-top: 13px; margin-right: 30px; font-size: 17px; border-radius: 15px; background-color: rgb(58, 233, 218); }.search-container button:hover { background-color: rgb(35, 168, 157); }.icon { color: white; z-index: 5; }.search-container { float: right; }.links { display: inline-block; }
 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link rel="stylesheet" href="https.//use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"> <link rel="stylesheet" href="navbar.css"> <title>Document</title> </head> <body> <header> <nav> <div class="links"> <span class="icon fas fa-bars"></span> <a href="#">Home</a> <a href="#">About</a> <a href="#">Contact</a> <a href="#">Privacy Policy</a> <a href="#">Sign-in</a> <div class="animation start-home"></div> </div> <div class="search-container"> <form> <input type="text" placeholder="Search..." name="search" class="searchbar"> <button type="submit"><i class="fas fa-search"></i><span class="text">Search</span></button> </form> </div> </nav> </header> </body> </html>

This solution is made in JS, which made it possible to remove excess from CSS and not depend on pre-set CSS values.

I hope this can help somehow.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Text On Hover Animation Not Working Properly With Space CSS3 Animation on Link Hover not working properly My CSS animation is working but not properly Hover Animation not behaving properly in CSS :hover and :hover:before not working properly hover property not working properly Hyperlink is not working properly on hover hover not working properly in IE a:hover not working properly hover not working properly with opacity
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM