IE6ナビゲーションホバー

StackOverflow https://stackoverflow.com/questions/329516

質問

次のコードを使用して、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を使用しています。これは、IE6では機能しない別のことです。

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

ありがとう、

役に立ちましたか？

解決

<a> IEのルールが変更されない限り、

IEはアンカーを再描画しません。 a:hoverに何かを追加します。例：

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

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

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

他のヒント

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

少し前に、使いたいというちょっとしたアイデアを思いつきました。これは通常の<！> amp;同じ画像としてのボタンのホバー状態、上部のボタンの通常の状態、およびその下のボタンのホバー状態。これは、ボタンの両方の状態が同じ画像としてすぐにキャッシュされることを意味します！また、ボタンのさまざまな状態に対応するさまざまな画像が画像フォルダに表示されることはありません。リンクのすべての状態を参照する画像は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は必要ありません<！> amp;画像が既に読み込まれているため、状態の変更はすぐに行われます：）

これがお役に立てば幸いです！

アンカータグの背景を使用して、画像を保持することもできます。

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");
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top