截图在这里
我正在尝试使用 CSS 为全屏背景图像设置悬停动画。(屏幕截图 1 和 2)但我也希望我的导航使用我的列表类样式,而不是我在本教程中使用的导航。(屏幕截图 3 和 4)。如何让类充当悬停图像的相邻兄弟而不是锚?
这是我的 CSS
html {
background: url(scarf6.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
.container {
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
top:0;
left:0;
}
.container img {
position: absolute;
top: 0%;
left:0%;
z-index: -60;
height:100%;
}
.container li img {
position: absolute;
top: 0%;
left: 100%;
height:100%;
z-index: -50;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
ul {
list-style: none;
}
nav {
top:0%;
right:0%;
left:100%;
height:100%;
width:30px;
z-index: 1;
display: block;
}
li a:hover + img {
left: 0px;
}
.red {
background: #FF9999;
}
.white {
background:#FAF0E6;
}
.pink {
background: #FFC0CB;
}
.fuscia {
background:#FF0033;
}
.l1 {
height:4%;
width:100%;
}
.l2 {
height:.7%;
width:100%;
}
.l3 {
height:1.3%;
width:100%;
}
.l4 {
height:.7%;
width:100%;
}
.l5 {
height:1.3%;
width:100%;
}
.l6 {
height:.7%;
width:100%;
}
.l7 {
height:2.7%;
width:100%;
}
.l8 {
height:3.3%;
width:100%;
}
.l9 {
height:5.4%;
width:100%;
}
.l10 {
height:1.7%;
width:100%;
}
.l11 {
height:6.7%;
width:100%;
}
.l12 {
height:.8%;
width:100%;
}
.l13 {
height:4.2%;
width:100%;
}
.l14 {
height:5%;
width:100%;
}
.l15 {
height:5.8%;
width:100%;
}
.l16 {
height:3.3%;
width:100%;
}
.l17 {
height:2.5%;
width:100%;
}
.l18 {
height:1.1%;
width:100%;
}
.l19 {
height:34.5%;
width:100%;
}
.l20 {
height:3.1%;
width:100%;
}
.l21 {
height:5%;
width:100%;
}
.l22 {
height:6.2%;
width:100%;
}
还有我的 HTML
<body>
<div class="container">
<div class="overlay">
<nav>
<li class="l1 pink">
<a href="#">Home</a>
<img src="../../Cover.png" alt="">
</li>
<li>
<a href="#">About</a>
<img class="hidden">
</li>
<li>
<a href="#">Clients</a>
<img class="hidden">
</li>
<li>
<a href="#">Work</a>
<img class="hidden">
</li>
<li>
<a href="#">Contact</a>
<img class="hidden">
</li>
</nav>
</div>
</div>
</body>
谢谢您的帮助!