私は次のことを達成するために、私のウェブサイトのリンクロールオーバー効果に取り組んでいます：CSSを使用してアンカーがイメージよりも小さい新しい種類のロールオーバー？
┌────────────────────────────┐
│ ┌──────────────────┐ │
│ │ <a> │ │
│ └──────────────────┘ │
│ │
│ <img> │
└────────────────────────────┘
私は背景画像、<img>をしたい、マウスがリンクのみ、<a>の上に置いたときに表示されるように。言い換えれば、リンク部分が上に乗っているとき、「クリック可能」にならずに、その後ろの画像が表示される（または状態が変化する）ようにします。そして私はCSSだけでそれをしたいと思います。
A）どのようにマークアップしても、<a>タグのどこにでも<img>があった場合、画像全体が表示されるとすぐに「クリック可能」になりました。 B）私はより大きな、より良い品質の画像を使用し、それらをHTMLに含めることを望んでいました.Javascriptやブラウザのハックを事前にロードする必要がありませんでした。
私のソリューションは、とき<img>変更を行うために（これは基本的に「メニュー」またはサイトナビゲーションの一部であるため）<a>と親<li>内<img>を入れ、その後、隣接兄弟セレクタ（+）を使用することでした<a>が表示されます。それは最も基本的なだで、CSSは次のようになります。
li {
size and position declarations; /*The size is the same as the contained image.*/
}
li a {
absolute size and position declarations for the link area;
z-index: 2; /*I use the z index to make sure the link stays above the image.*/
}
li img {
absolute size and position declarations for the image;
z-index: 1;
display: none;
li a:hover + img {
display: block;
}
そして、基本的なHTMLは次のようになります。
<ul>
<li><a href="page.htm"> </a><img src="image.jpg"></li>
<li>...
</ul>
あなたがアクションでそれを見たい場合は、私はテストのバージョンアップを持っていますwww.joshuakirby.net/testで（穏やかに - 私は独学で教えていますが、私はコーディングで熟練していません）。それはIEを除いて、私が試したすべての主要なブラウザで素晴らしい動作します。私はそれがIE9でも、どんなIEバージョンでも正しく動作するようにはなっていません。ロールオーバーは、IE6でスプライトと同じようにちらつきます。リンクは常に最初の、または2回目の試行でクリック可能であるとは限りません。
IEは私にこれを悲しんでいる理由を知っていますか？ IEをこのCSSを他のブラウザと同じようにレンダリングするいくつかの修正はありますか？または、私が思いついたメソッド全体がうんざりだとすれば、CSSを使ってこのロールオーバーの作業を行うために、よりクロスブラウザフレンドリーでエレガントな方法を誰も考えることができますか？
私はウェブデザインの初心者ではありません。また、私はJSとPHPに取り組むこともできます。 CSSでそれをすべてやっているというアイデアは、私には魅力的でした。あなたの助けを前もってありがとう！
+1についてよく書かれた質問です。あなたは 'display：block/none'以外のものを使ってイメージを表示/非表示しようとしましたか？（負の位置、視界など） –
ありがとう、ティム。はい、私はもともと「可視性」を使用していましたが、オフセット位置も試しました。このことをさらに混乱させるために、私が 'ディスプレイ'方法で解決した理由は、他の2つがちらつき*悪い*ためです。彼らはすべて、同じ程度の「クリック可能性」の問題を抱えています。 – Josh