如何制作CSS菜单＆＃34;选择＆＃34;与悬停图像库效果？

Question

我试图找出如何将第一个导航菜单选项设为＆＃34; 选择＆＃34;当您到达网页时，会自动（默认情况下）在右侧显示图像的类。

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

链接：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; }

我已经将图像叠加在另一个图像上，并使用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; }