0

ホバー時にスプライトから「ホバー」効果をもたらすために、スプライト ナビゲーション用の CSS 部分を実装しようとしているときに問題が発生しました。コードを表示すると説明が簡単になります。

CSS:

#nav {

    width:837px;
    float:left;
    margin:0px 0px 0px 30px;
    background:url(../images/withtext.gif) repeat-x;
    height:79px;
    position: relative;
    top: -45px;
}   


#nav li {
 margin:0;
 padding:0;
 list-style-type:none;
 display:inline; 
 height:79px;
 text-align:center; 
 float:left; 
 line-height:79px; 
 font-family:Georgia, "Times New Roman", Times, serif;
 }



#nav a {
 display:block;
 height:79px; 
 color:#311f11;
 text-decoration:none;
 font-size:13px;
 }

#nav a:hover {
 background-image:url(withtext.gif); 
 color:#fff;
 }



#nav .snowboard { width:240px; }
#nav .snowboard a:hover { background-position: 0px bottom; }

HTML:

<ul id="nav">
   <li class="snowboard"><a href="#">Snowboard</a></li>
   <li class="briller"><a href="#">Briller</a></li>
   <li class="ski"><a href="#">Ski</a></li>
   <li class="stovler"><a href="#">Stovler</a></li>
   <li class="handlevogn"><a href="#">Handlevogn</a></li>

</ul>

ナビゲーション画像:

[1] http://i.imgur.com/zkVmoEN.gif「パッシブとホバー状態のナビゲーション バー」

ナビゲーションの現在の状態:

[2] http://i.imgur.com/oZPK8kd.jpg「ブラウザでのナビゲーション」

では、ホバー時にノッチ全体で画像を下に移動するようにするにはどうすればよいですか?

事前に大歓迎です！

4

3 に答える 3

2

これがあなたの実用的なソリューションです

#nav ul, #nav li{
  margin: 0;
  padding: 0;
}
#nav {

    width:837px;
    float:left;
    margin:0px 0px 0px 30px;
    background:url(http://i.imgur.com/zkVmoEN.gif) repeat-x;
    height:79px;
    position: relative;
}   

#nav li {
 margin:0;
 padding:0;
 list-style-type:none;
 display:inline; 
 height:79px;
 text-align:center; 
 float:left; 
 line-height:79px; 
 font-family:Georgia, "Times New Roman", Times, serif;
 }

#nav a {
 display:block;
 height:79px; 
 color:#311f11;
 text-decoration:none;
 font-size:13px;
  width:150px;
  text-indent:-9999px;
 }
.snowboard a:hover {
  background-image: url(http://i.imgur.com/zkVmoEN.gif);
  background-position: -40px 80px;
}
.briller a:hover {
  background-image: url(http://i.imgur.com/zkVmoEN.gif);
  background-position: -190px 80px;
}
.ski a:hover {
  background-image: url(http://i.imgur.com/zkVmoEN.gif);
  background-position: -340px 80px;
}
.stovler a:hover {
  background-image: url(http://i.imgur.com/zkVmoEN.gif);
  background-position: -490px 80px;
}
.handlevogn a:hover {
  background-image: url(http://i.imgur.com/zkVmoEN.gif);
  background-position: -640px 80px;
}
于 2013-04-20T20:57:55.007 に答える
1

CSS に問題がある場合は、テキストにホバー効果を追加しているだけである可能性があります。ちなみに、テキストをホバーして、必要な場所に背景画像を表示することはできません。必要に応じて、これを試すことができます：

CSS:

    #nav{background:url(../images/withtext.gif) 
    repeat-x;
    height:100px;
    width:100%;
    }
li {
background-color: #??????;
}
li a {
color: black;
}
li:hover {
background-color: #something_different;
}
li a:hover {
color:#something_different;
}

または、li クラスをそれぞれ異なるものにしたい場合は、次のようにするだけです。

.snowboard li:hover {
Some code...
}

.snowboard li a:hover {
some code
}

そういうレイアウトなら基本的になんでもできます。

于 2013-04-20T20:48:59.523 に答える
1

試す：

#nav li a {
 display:block;
 height:79px; 
 color:#311f11;
 text-decoration:none;
 font-size:13px;
 }

#nav li a:hover {
 background-image:url(withtext.gif); 
 color:#fff;
 }



#nav li.snowboard { width:240px; }
#nav li.snowboard a:hover { background-position: 0px -79px; }/*Here change as needed.*/

Css クラスは常にタグを使用します。例:li.class{} セレクターの取引を同じレベルに保つようにしてください。

foo foo2 foo2 a{}
foo foo2 foo2 a:hover{}

background-position では、負と正の px を使用します。

注:さまざまなブラウザーで CSS ホイールの作成に問題がある場合は、CSS RESET を使用することをお勧めします。

*{マージン:0; パディング:0; リスト スタイル タイプ: なし; }

于 2013-04-20T20:44:47.177 に答える