use*_*879 3 html css css-animations
我正在尝试使用以下代码在导航栏上实现悬停幻灯片效果：
@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>无论我如何努力，我都不知道如何让它发挥作用。
不幸的是，如果不更改 HTML 结构，这是无法完成的。让我这么说的是 CSS 线nav a:nth-child(x):hover ~ .animation。对于您的 HTML 结构，您无法.animation根据li悬停状态设置样式，它们不是同级的。要执行此操作a（或在您的情况下li）必须位于与以下相同的 DOM“分支”上.animation
我对 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>
| 归档时间： |
|
| 查看次数： |
2001 次 |
| 最近记录： |