4

私は、次のことを達成するために、自分の Web サイトのリンク ロールオーバー効果に取り組んできました。

┌────────────────────────────┐
│  ┌──────────────────┐      │
│  │ <a>              │      │
│  └──────────────────┘      │
│                            │
│                 <img>      │
└────────────────────────────┘

<img>マウスがリンクの上にのみ置かれたときに背景画像が表示されるようにします<a>。つまり、リンク部分にカーソルを合わせたときに、その後ろの画像が「クリック可能」になることなく表示される（または状態が変化する）ようにしたいのです。CSSだけでやりたい。

一般的な CSS の背景/スプライト アプローチは使用しませんでした。A) どのようにマークアップしても、<img>がタグ内のどこかにある場合、<a>画像全体が表示されるとすぐに「クリック可能」になり、B) したかったからです。より大きく、より高品質の画像を使用し、それらを HTML に含めることで、Javascript やブラウザー ハックを使用してそれらをプリロードする必要がなくなりました。

私の解決策は、<a>と を<img>親内に配置し<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 のスプライトのようにちらつきます。リンクは、1 回目または 2 回目の試行で常にクリックできるとは限りません。

IEがこれで私に悲しみを与えている理由を誰かが知っていますか? IE がこの CSS を他のブラウザーのようにレンダリングするようにするための修正はありますか? または、私が思いついた方法全体ががらくたである場合、CSSを使用してこのロールオーバーを機能させるための、よりクロスブラウザーフレンドリーでエレガントな方法を誰かが思いつくことができますか?

私は Web デザインの初心者ではなく、必要に応じて JS や PHP にも取り組むことができます。すべてを CSS で行うというアイデアは、私にとって魅力的なものでした。よろしくお願いします。

4

2 に答える 2

1

このようなものは機能しますか？

http://jsfiddle.net/lazerblade01/CAhuy/

明らかに、色の代わりに画像を背景画像として div に追加できます。

編集：IE9（別のコンピューターを起動せずにアクセスできるIEの唯一のバージョン）でテストしました。背景色はちらつきなしで機能するようです。それがイメージに有効かどうか教えてください。

于 2012-04-16T02:29:43.563 に答える
1

コンテンツがない場合、IE がリンクの z-index 値を尊重していないように見えるため、ちらつきが発生します。ただし、リンクの背景 (例: #craftsLink a ) を透明な png 画像に設定すると、問題が修正され、サイトが IE7+ で動作するようになります。

于 2012-04-16T03:18:15.063 に答える