导航栏上的 CSS 悬停滑动效果
[英]CSS hover slide effect on navigation bar
问题描述
我正在尝试使用以下代码在导航栏上实现悬停滑动效果：
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); body { font-family: 'Open Sans', sans-serif; background: #2c3e50; } nav{ position: relative; width: 590px; height: 50px; background: #34495e; border-radius: 8px; font-size: 0; box-shadow: 0 2px 3px 0 rgba(0,0,0,.1); } nav a{ font-size: 15px; text-transform: uppercase; color: white; text-decoration: none; line-height: 50px; position: relative; z-index: 1; display: inline-block; text-align: center; } nav .animation{ position: absolute; height: 100%; /* height: 5px; */ top: 0; /* bottom: 0; */ z-index: 0; background: #1abc9c; border-radius: 8px; transition: all .5s ease 0s; } nav a:nth-child(1){ width: 100px; } nav .start-home, a:nth-child(1):hover~.animation{ width: 100px; left: 0; } nav a:nth-child(2){ width: 110px; } nav a:nth-child(2):hover~.animation{ width: 110px; left: 100px; } nav a:nth-child(3){ width: 100px; } nav a:nth-child(3):hover~.animation{ width: 100px; left: 210px; } nav a:nth-child(4){ width: 160px; } nav a:nth-child(4):hover~.animation{ width: 160px; left: 310px; } nav a:nth-child(5){ width: 120px; } nav a:nth-child(5):hover~.animation{ width: 120px; left: 470px; }
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Navbar Menu Hover Effect</title> <link rel="stylesheet" href="style.css"> </head> <body> <nav> <a href="#">Home</a> <a href="#">About</a> <a href="#">Blog</a> <a href="#">Portfolio</a> <a href="#">Contact</a> <div class="animation start-home"></div> </nav> </body> </html>
问题是我在尝试使上面的代码适应我的导航栏 HTML 结构时遇到了一些困难，它看起来像这样：
<nav> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">About</a> </li> <li> <a href="#">Blog</a> </li> <li> <a href="#">Portfolio</a> </li> <li> <a href="#">Contact</a> </li> </ul> <div class="animation start-home"></div> </nav>
无论我多么努力，我都无法弄清楚如何让它发挥作用。
2 个解决方案
解决方案1
2 2021-07-20 13:39:06
如果不更改 HTML 结构，很遗憾，您无法做到这一点。 让我说的是 CSS 行nav a:nth-child(x):hover ~ .animation 。 使用您的 HTML 结构，您无法根据悬停的li设置.animation样式，它们不是兄弟。 要做这样的事情a （或在你的情况下li ）必须与.animation位于同一个DOM“分支”
我对 Drupal 主题了解不多，但是如果您可以在菜单中创建一个“假”项，然后将其应用到animation类，这可能会起作用。 （这会改变你的 HTML 结构）
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); body { font-family: 'Open Sans', sans-serif; background: #2c3e50; } nav { position: relative; width: 590px; height: 50px; background: #34495e; border-radius: 8px; font-size: 0; box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1); } ul { display: contents; } nav li { position: relative; z-index: 1; display: inline-block; text-align: center; } nav a { font-size: 15px; text-transform: uppercase; line-height: 50px; color: white; text-decoration: none; } nav .animation { position: absolute; height: 100%; /* height: 5px; */ top: 0; /* bottom: 0; */ z-index: 0; background: #1abc9c; border-radius: 8px; transition: all .5s ease 0s; } nav li:nth-child(1) { width: 100px; } nav .start-home, li:nth-child(1):hover~.animation { width: 100px; left: 0; } nav li:nth-child(2) { width: 110px; } nav li:nth-child(2):hover~.animation { width: 110px; left: 100px; } nav li:nth-child(3) { width: 100px; } nav li:nth-child(3):hover~.animation { width: 100px; left: 210px; } nav li:nth-child(4) { width: 160px; } nav li:nth-child(4):hover~.animation { width: 160px; left: 310px; } nav li:nth-child(5) { width: 120px; } nav li:nth-child(5):hover~.animation { width: 120px; left: 470px; }
<nav> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">About</a> </li> <li> <a href="#">Blog</a> </li> <li> <a href="#">Portfolio</a> </li> <li> <a href="#">Contact</a> </li> <li class="animation start-home"></li> </ul> </nav>
只有更改被<a>替换为<li>并添加display: contents <ul> display: contents
解决方案2
2 已采纳 2021-07-20 13:51:10
使<div>成为列表项，即<li>并在悬停在列表项上时应用动画。
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); body { font-family: 'Open Sans', sans-serif; background: #2c3e50; } nav { position: relative; width: 590px; height: 50px; background: #34495e; border-radius: 8px; font-size: 0; box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1); } nav a { font-size: 15px; text-transform: uppercase; color: white; text-decoration: none; line-height: 50px; position: relative; z-index: 1; display: inline-block; text-align: center; } nav .animation { position: absolute; height: 100%; /* height: 5px; */ top: 0; /* bottom: 0; */ z-index: 0; background: #1abc9c; border-radius: 8px; transition: all .5s ease 0s; } ul { display: flex; } nav li:nth-child(1) { width: 100px; } nav .start-home, li:nth-child(1):hover~.animation { width: 100px; left: 0; } nav li:nth-child(2) { width: 110px; } nav li:nth-child(2):hover~.animation { width: 110px; left: 100px; } nav li:nth-child(3) { width: 100px; } nav li:nth-child(3):hover~.animation { width: 100px; left: 210px; } nav li:nth-child(4) { width: 160px; } nav li:nth-child(4):hover~.animation { width: 160px; left: 310px; } nav li:nth-child(5) { width: 120px; } nav li:nth-child(5):hover~.animation { width: 120px; left: 470px; }
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Navbar Menu Hover Effect</title> <link rel="stylesheet" href="style.css"> </head> <body> <nav> <ul class="nav"> <li> <a href="#">Home</a> </li> <li> <a href="#">About</a> </li> <li> <a href="#">Blog</a> </li> <li> <a href="#">Portfolio</a> </li> <li> <a href="#">Contact</a> </li> <li class="animation start-home"></li> </ul> </nav> </body> </html>
如何获得CSS悬停效果以覆盖导航栏的整个顶部和底部？
[英]How can I get my CSS hover effect to cover the entire top and bottom of my navigation bar?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.