0

私は次のことを達成しようとしています:

ユーザーが my にカーソルを合わせるnavigationbarと、画像とテキストの色が変わる必要があります。画像にはスプライトを使用しています。

<ul id="nav">
    <li id="nav_logo"><img src="images/lch.png" width="302" height="114" alt="LCH"></li>
    <li id="nav_over_lch"><a href="index.html"><span></span> OVER LCH </a></li>
    <li id="nav_nieuws"><a href="index.html"><span></span>NIEUWS</a></li>
    <li id="nav_activiteiten"><a href="index.html"><span></span>EVENTS</a></li>
    <li id="nav_fotos"><a href="index.html"><span></span>FOTO 'S</a></li>
    <li id="nav_contact"><a href="index.html"><span></span>CONTACT</a></li>
 </ul>

私はすでにいくつかのCSSを持っています:

li#nav_over_lch span{background-position: 0 0;} 
li#nav_over_lch span:hover{background-position: 0 -50px;}
#nav li a {color:#1f1f1f; text-decoration:none; font-size:40px; font-family: 'headline_onehplhs'; display: block; text-align: center;}
#nav li a:hover{color:#006699;}

これは、画像とテキストを変更する CSS の一部です。これまでのところ、テキストをホバーすると両方が変化しますが、画像をホバーすると画像のみが変化します。（クロスブラウザ）CSSでこれを可能にする方法はありますか?

4

1 に答える 1

2

ホバーしたい要素にホバーを置く必要があります

li#nav_over_lch span{background-position: 0 0;} 
li#nav_over_lch:hover span{background-position: 0 -50px;}
#nav li a {color:#1f1f1f; text-decoration:none; font-size:40px; font-family: 'headline_onehplhs'; display: block; text-align: center;}
#nav li:hover a{color:#006699;}
于 2013-06-08T17:28:41.780 に答える