0

我试图弄清楚如何使第一个导航菜单选项成为“选定”类，当您访问网页时，该类会自动（默认）显示右侧的图像。

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

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

有任何 CSS 提示或建议吗？

截屏

4

1 回答 1

0

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

演示

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，并且与具有焦点的链接对应的那个设置相同（也用于a:activeIE）。

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

为了使其持久化，您必须使用称为复选框 hack 的东西对 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 回答