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を介して、意味のない領域に配置します。たとえば、画像の高さが32ピクセルの場合は、次のように配置します。

background-position: left 32px;

それはこの画像をどういうわけか見えなくします。（重要な注意：この背景を持つ要素はdisplay：blockとして使用することをお勧めします）。次に、ホバーすると、画像を元に戻します。

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

私はこれを多くの場合使用しています。また、2つの画像を切り替える場合（実際には、両方が1つの画像にあり、ホバーすると背景位置のみが移動します）。

于 2013-02-11T05:14:28.080 に答える