とナビゲーションを設定する方法私はこのようになりスプライトを設計している画像

Question

フェージング（スプライト）背景：アイデアは（ホバーにフェードイン画像の上部を持つことである

ナビゲーションシステム内で）。私はナビゲーション項目のテキストを除いてすべてが働いています。 this pageに示されているように、退色している​​スパン内に含まれているので、ナビゲーションのテキストは背景画像とともにフェードインまたはフェードアウトします。私は誰かが私がテキストを常に表示し続けることができるように私の頭を丸くするのを助けることができるかどうか疑問に思います。ここで

はhtmlです：

<ul class="navigation"> 
    <li><a href=""><span>home</span></a></li> 
    <li><a href=""><span>contact</span></a></li> 
</ul> 

とCSS：

body, ul,li { 
    margin:0; 
    padding:0; 
} 

ul { 
    list-style:none; 
    text-align: center; 
    color: white; 
    line-height: 30px; 
} 

ul a { 
    text-decoration: none; 
    color: white; 
    font-size: 18px; 
} 

.navigation li { 
    background: url(nav.png) no-repeat 0 -30px; 
    width: 223px; 
    height: 30px; 
} 

.navigation li span { 
    background: url(nav.png) no-repeat 0 0px; 
    width: 223px; 
    height: 30px; 
    display: block; 
    opacity: 0; 
    filter: alpha(opacity=0); 
} 

とスクリプト：

$(document).ready(function() { 
    $(".navigation li a").hover(function() { 
     $(this).children("span").stop().animate({ 
      opacity: 1 
     }, 300); 
    }, function() { 
     $(this).children("span").animate({ 
      opacity: 0 
     }, 400); 
    }); 
}); 

おかげで、

ニック

Answer 1

これはトリックを行う必要があります。ライブ例：http://jsfiddle.net/zDwP9/2/

HTML：

<ul class="navigation"> 
    <li><a href="">home</a><span></span></li> 
    <li><a href="">contact</a><span></span></li> 
</ul> 

（移動span外部タグaの）CSSの変更：li拡幅（左aとspan右、調整幅とspanの背景位置を浮かべ）

ul a { 
    text-decoration: none; 
    color: white; 
    font-size: 18px; 
    float:left; 
    width: 204px; 
} 

.navigation li span { 
    background: url(nav.png) no-repeat -204px 0; 
    width: 30px; 
    height: 30px; 
    display: block; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    float:right; 
} 

jQueryの/ JavaScriptを：（liからli aから変更セレクタ）

$(document).ready(function() { 
    $(".navigation li").hover(function() { 
     $(this).children("span").stop().animate({ 
      opacity: 1 
     }, 300); 
    }, function() { 
     $(this).children("span").animate({ 
      opacity: 0 
     }, 400); 
    }); 
}); 

Answer 2

スパンに背景画像を入れないでください。

HTML

<ul class="navigation"> 
    <li><a href=""><div class="background"></div><span>home</span></a></li> 
    <li><a href=""><div class="background"></div><span>contact</span></a></li> 
</ul> 

CSS

.navigation li { 
    position: relative; 
    background: url(nav.png) no-repeat 0 -30px; 
    width: 223px; 
    height: 30px; 
} 

.navigation li span { 
    width: 223px; 
    height: 30px; 
    display: block; 
    opacity: 0; 
    filter: alpha(opacity=0); 
} 

.navigation li .background { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    background: url(nav.png) no-repeat 0 0px; 
    width: 223px; 
    height: 30px; 
} 

JS

$(document).ready(function() { 
    $(".navigation li a").hover(function() { 
     $(this).children(".background").stop().animate({ 
      opacity: 1 
     }, 300); 
    }, function() { 
     $(this).children(".background").animate({ 
      opacity: 0 
     }, 400); 
    }); 
});