截图 here
我正在尝试使用 CSS 为全屏背景图像设置悬停动画。 (屏幕截图 1 和 2)但我也希望我的导航使用我的列表类样式而不是我在 this 中使用的导航教程。 (屏幕截图 3 和 4)。我怎样才能让这些类充当悬停图像的相邻兄弟而不是 anchor ？
这是我的 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>
感谢您的帮助!
最佳答案
将图像放置为 li 或 a 的背景图像。如果您不想显示图像，请通过背景位置将其放置到一些没有意义的区域 - 例如如果图像高度为 32px，请放置它:
background-position: left 32px;
它会使这个图像以某种方式不可见。 (重要说明:更好的是，具有此背景的元素作为显示: block )。然后，当悬停时，您将把图像放回原位:
...:hover {
background-position: left top;
}
我在很多情况下都在使用它。同样在切换两张图片时 - 事实上，它们都在一张图片中，并且只在悬停时移动背景位置。
关于css - 在悬停时更改背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14803616/