css - 如何制作具有悬停图库效果的 CSS 菜单 "Selected"？

Question

我正在尝试弄清楚如何使第一个导航菜单选项成为“已选择”类，当您进入网页时，它会自动(默认情况下)在右侧显示图像。

然后，当您将鼠标悬停在其他链接上时，它仍会正确显示其他图像。现在，在将鼠标移到菜单上的“衬衫” 上之前，您看不到第一张图片。

链接:http://avisuals.web.fc2.com/readymade.html

有任何 CSS 提示或建议吗？

Answer 1

保留当前结构的解决方案是在链接具有焦点时使图像可见。

DEMO

HTML 结构几乎保持不变，我只在链接中添加了 tabindex=1

<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 并且与具有焦点的链接对应的设置相同(也为 IE 使用了 a:active) .

这种方法的主要缺点是它不持久。单击页面上的其他任何位置后，最后单击的链接将失去焦点，并且包含图像的相应 div 的不透明度再次变为 0。

---

为了使其持久化，您必须使用一种称为复选框 hack 的方法对 HTML 进行更多更改。这涉及用单选输入对应的标签替换链接，隐藏单选按钮并在选中相应的单选按钮时将不透明度设置为 1 (input[type=radio]:checked)。

DEMO

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; }