0

截图在这里

我正在尝试使用 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>

谢谢您的帮助！

4

1 回答 1

0

将图像放置为 li 或 a 的背景图像。如果您不想显示图像，请通过 background-position 将其放置到某个非生成区域 - 例如，如果图像高 32px，则将其放置：

background-position: left 32px;

它会使这个图像不知何故不可见。（重要提示：更好的是，具有此背景的元素为 display: block）。然后，当悬停时，您会将图像放回：

...:hover {
  background-position: left top;
}

我在很多情况下都在使用它。同样在切换两个图像时-实际上，它们都在一个图像中，并且仅在悬停时移动背景位置。

于 2013-02-11T05:14:28.080 回答