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 回答