1

次のコードを使用して、非 JS ナビゲーションを使用しています。

<ol id="navigation">
    <li id="home"><a href="#"><img src="./images/nav/home-hover.png" alt="Home" /></li>
    ...
</ol>

そしてCSS：

#navigation a {
    display: block;
    height: 25px;
}

#navigation a img {
    display: none;
}

#navigation a:hover img {
    display: block;
}

#home a {
    background: url('./images/nav/home-normal.png') no-repeat;
    width: 100px;
}

私の問題は、IE6 ではホバー時に画像が変更されないことです。私は:hoverアンカーで を使用しdisplayてvisibilityいます。

画像の置き換え/プリロードのために大量のJavaScriptを追加する必要がないようにしたいです（jQueryのようなものを埋め込むことはオプションではありません）-誰かが私をここで助けてくれますか?

ありがとう、

4

3 に答える 3

4

<a>IE は、それ自体のルールが変更されない限り、アンカーを再描画しません。に何かを追加しますa:hover。例:

 #navigation a:hover {border:0} /* no-op */

ところで: 残念ながら、人気のあるスクリーン リーダーは で読み上げないdisplay:noneため、メニューにアクセスできなくなります。

<img>デフォルトで表示し、ホバーすると非表示にすることをお勧めします。

于 2008-11-30T22:52:42.873 に答える
2

ジェイソンがここで言っていることに同意しますが、ユーザーがリンクにカーソルを合わせる前に両方の画像をキャッシュしたいのであれば、なぜ 2 つの画像を使用するのでしょうか?

少し前に、ボタンの通常の状態とホバー状態の両方を同じ画像として使用するのが好きな小さなアイデアを思いつきました。上部のボタンの通常の状態と下のボタンのホバー状態、これは、同じ画像であるため、ボタンの両方の状態がすぐにキャッシュされることを意味します。また、ボタンのさまざまな状態のさまざまな画像が画像フォルダーをいっぱいにする必要はありません。そのリンクのすべての状態を参照する画像は 1 つだけです。

次に、img タグとそのスタイリング (display:none など) を取り除くことができます。

そして、リンクのスタイリングを次のようにします。

#home a {    
    background: url('./images/nav/home-normal.png') no-repeat left top;    
    width: 100px;
}
#home a:hover {    
    background-position:left bottom;
}

リンクにも高さを設定する必要があるため、リンクの他の状態のどの部分も表示されません。意味がありますか? 要素の寸法スタイルを使用して、背景画像を効果的に半分にカットします。

JavaScript は不要です。画像は既に読み込まれているため、状態の変更は瞬時に行われます :)

お役に立てれば！

于 2008-12-04T16:37:19.587 に答える
1

アンカー タグの背景をイメージ ホルダーとして使用することもできます。

HTML:

<ol>
 <li><a href="#"></a></li>
</ol>

CSS:

li a{
 background:url("link.jpg");
 display:block;
 width:100px;
 height:50px;
} 

li a:hover{
 background:url("link2.jpg");
}
于 2008-12-01T03:50:11.103 に答える