0

最初のナビゲーション メニュー オプションを、Web ページにアクセスしたときに右側の画像を自動的に (デフォルトで) 表示する「選択済み」クラスにする方法を見つけようとしています。

次に、マウスを他のリンクの上に置くと、他の画像が適切に表示されます。現在、マウスをメニューの「シャツ」の上に移動するまで、最初の画像は表示されません。

リンク: http://avisuals.web.fc2.com/readymade.html

Any CSS tips or suggestions?

Screenshot

4

1 に答える 1

0

現在の構造を維持する解決策は、リンクにフォーカスがあるときに画像を表示することです。

デモ

tabindex=1HTML 構造はほとんど同じままです。リンクを追加しただけです。

<ul id="gallery">
    <li class="thumb">
        <a class="thumb" href="#" tabindex=1>Orion</a>
        <div><img src="http://i.space.com/images/i/20521/i02/eso-orion-nebula-1600.jpg" alt="blue shirt" border="0"><br><a class="selected" href="images/blueshirt.jpg" border="0"></a></div>
    </li>
    <li class="thumb">
        <a class="thumb" href="#" tabindex=1>Pencil</a>
        <div><img src="http://i.space.com/images/i/21535/i02/pencil-nebula-wide-1600.jpg" alt=""><br><a class="enlarge" href="images/P1010426.jpg"></a></div>
    </li>
    <li class="thumb">
        <a class="thumb" href="#" tabindex=1>Carina</a>
        <div><img src="http://i.space.com/images/i/15222/i02/carina-nebula-1600-1200.jpg" alt=""><br><a class="enlarge" href="images/P1010426.jpg"></a></div>
    </li>
    <li class="thumb">
        <a class="thumb" href="#" tabindex=1>Trifid</a>
        <div><img src="http://i.space.com/images/i/19657/i02/trifid-nebula-1600.jpg" alt=""><br><a class="enlarge" href="images/P1010426.jpg"></a></div>
    </li>
</ul>

私が使用した CSS - 機能の概要を説明するために最小限に抑えました (また、私は眠りに落ちているため)、目を楽しませることができます。

div { position: absolute; left: 0; opacity: 0; transition: 1s; }
a:focus { outline: none; }
li:first-child div, a:focus + div, a:active + div { opacity: 1; }

私は、画像の上にあるdivを積み重ねて、他の画像の上に置き、opacity: 0;それらを非表示にするために使用しました。次に、最初のものを設定し、opacity: 1フォーカスのあるリンクに対応するものと同じものを設定しました（a:activeIEにも使用されます）。

この方法の主な欠点は、永続的でないことです。ページの他の場所をクリックすると、最後にクリックしたリンクがフォーカスを失い、画像を保持する対応する div の不透明度が再び 0 になります。

永続化するには、チェックボックス ハックと呼ばれるものを使用して、HTML をもう少し変更する必要があります。これには、リンクをラジオ入力に対応するラベルに置き換え、ラジオ ボタンを非表示にし、対応するラジオ ボタンがオンになっているときに不透明度を 1 にする必要があります ( input[type=radio]:checked)。

デモ

HTML は次のようになりました。

<ul id="gallery">
    <li class="thumb">
        <input type=radio name=i id=i1 checked>
        <label for=i1>Orion</label>
        <div><img src="http://i.space.com/images/i/20521/i02/eso-orion-nebula-1600.jpg" alt="blue shirt" border="0"><br><a class="selected" href="images/blueshirt.jpg" border="0"></a></div>
    </li>
    <li class="thumb">
        <input type=radio name=i id=i2>
        <label for=i2>Pencil</label>
        <div><img src="http://i.space.com/images/i/21535/i02/pencil-nebula-wide-1600.jpg" alt=""><br><a class="enlarge" href="images/P1010426.jpg"></a></div>
    </li>
    <li class="thumb">
        <input type=radio name=i id=i3>
        <label for=i3>Carina</label>
        <div><img src="http://i.space.com/images/i/15222/i02/carina-nebula-1600-1200.jpg" alt=""><br><a class="enlarge" href="images/P1010426.jpg"></a></div>
    </li>
    <li class="thumb">
        <input type=radio name=i id=i4>
        <label for=i4>Trifid</label>
        <div><img src="http://i.space.com/images/i/19657/i02/trifid-nebula-1600.jpg" alt=""><br><a class="enlarge" href="images/P1010426.jpg"></a></div>
    </li>
</ul>

そしてCSS：

input[type=radio] { display: none; }
label { cursor: pointer; }
div { position: absolute; left: 0; opacity: 0; transition: 1s; }
input[type=radio]:checked ~ div { opacity: 1; }
于 2012-09-16T23:22:57.327 に答える