单击缩略图后，大图像将不会保留。HTML&；仅CSS

所以我最近写了另一篇文章，我觉得它得到了明确的回答，这是链接（），虽然它确实解释并实现了我想知道的，但它为我创造了一个新的问题。所以我认为最好为这个问题创建一个新帖子。
我的问题是，当我创建导航菜单并在其中有一个链接时，当你点击它时，它会显示div部分。在那个部分我有一个缩略图。我想让它可以点击，这样当你点击它时，大图像就会出现在侧面。虽然我可以用hover来实现这一点，但如果用户想点击缩略图，我也希望它（大图像）保持在那里。如果用户希望看到图像的完整分辨率，我还可以在大图像的描述上设置一个锚。问题是，当我点击缩略图时，整个Div部分消失了……这很奇怪。这是我的意思。以下是我在虚拟页面上的代码：

这是我的

---

请记住，我是html和css新手，我真的很想用这两种语言制作我的公文包网站。一旦我对css和html有了更好的掌握和理解，我将在稍后进入javascript。我已经做了三个多星期了。提前感谢您阅读所有这些内容，并有可能提供帮助

嘿，现在您可以使用

复选框

，并且可以使用复选框

请查看我创建的演示

HTML

<div id="container">

<h1>Welcome to Erimagination!</h1>
<hr id="top_hr">

<ul id="navmenu">

    <!-- This is my PORTFOLIO section -->
    <li>
        <input type="checkbox" id="portfolio"/>
        <label for="portfolio">Portfolio</label>
        <span class="des_am"><h3>Latest Work</h3><br>
            <p>check out this image:
            <br>
                <a href="#"><img class="thumb_image" src="http://www.gravatar.com/avatar/f6ba1c2b27d3a607d894c70ba1be0f85?s=32&d=identicon&r=PG" alt="" ></a>
                <span class="large_image"><img src="files/pictures/photoshop/brit_airways.jpg" alt="">
                    <br>This is the larger version of the thumbnail. If you would like to see the full
                    version you can click <a href="#" style="text-decoration:underline; color:blue;"><i>HERE</i></a>
                </span>
            </p>
        </span>
    </li>
    <!-- PORTFOLIO ends -->

</ul>


</div>

---

嘿，现在您可以使用

复选框

，并且可以使用复选框

请查看我创建的演示

HTML

<div id="container">

<h1>Welcome to Erimagination!</h1>
<hr id="top_hr">

<ul id="navmenu">

    <!-- This is my PORTFOLIO section -->
    <li>
        <input type="checkbox" id="portfolio"/>
        <label for="portfolio">Portfolio</label>
        <span class="des_am"><h3>Latest Work</h3><br>
            <p>check out this image:
            <br>
                <a href="#"><img class="thumb_image" src="http://www.gravatar.com/avatar/f6ba1c2b27d3a607d894c70ba1be0f85?s=32&d=identicon&r=PG" alt="" ></a>
                <span class="large_image"><img src="files/pictures/photoshop/brit_airways.jpg" alt="">
                    <br>This is the larger version of the thumbnail. If you would like to see the full
                    version you can click <a href="#" style="text-decoration:underline; color:blue;"><i>HERE</i></a>
                </span>
            </p>
        </span>
    </li>
    <!-- PORTFOLIO ends -->

</ul>


</div>

---

使用jquery可以吗。@svs我确信在其他语言中更容易，但我真的很想在css和html中保留它，因为它们是我熟悉的。实际上，使用css来处理单击事件并不容易，也不可能。使用jquery可以吗。@svs我确信在其他语言中更容易，但我会这样做我真的很想把它保存在css和html中，因为它们是我熟悉的。实际上，使用css来处理click事件并不容易，也不可能。@rohit Azad啊，虽然jfiddle不起作用，但我只是简单地将这些内容复制并粘贴到我的虚拟页面html文件的副本中，它的工作非常神奇。谢谢。@rohit Azad啊，虽然jfiddle不起作用，但我只是简单地复制并粘贴了我的虚拟页面html文件的副本，它工作起来很神奇。谢谢