所以我最近发表了另一篇文章,我觉得它得到了明确的回答,这是链接 ( Prior post ),虽然它确实解释并实现了我想知道的内容,但它给我带来了一个新问题。所以我认为最好为这个特定问题创建一个新帖子。
我的问题是,当我创建我的导航菜单并在其中有一个链接时,当您单击它时它会显示 div 部分。在该部分中,我有一个缩略图。我想让它可以点击,这样当你点击它时,大图像就会出现在旁边。虽然我可以通过悬停来做到这一点,但如果用户想要单击缩略图,我也希望它(大图像)保留在那里。如果用户想要查看图像的全分辨率,我也会在大图像的描述上有一个 anchor 。问题是,当我单击缩略图时,整个 Div 部分都消失了……这很奇怪。这是一个 video表明我的意思。这也是我在虚拟页面上的代码:
这是我的 fiddle
请记住,我是 html 和 css 的新手,真的很想用这两种语言制作我的投资组合网站。一旦我更好地掌握和理解 css 和 html,我将在稍后转向 javascript。现在已经做了 3 个多星期了。提前感谢您阅读所有这些内容并可能提供帮助。
最佳答案
嘿,现在你可以使用check box
并且可能
请检查我创建的这个演示 http://jsfiddle.net/n6f4Y/1/
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>
CSS
/* Reset things */
*{
padding: 0px;
margin: 0px;
}
/* The pages width and height plus bkg color and margins */
#container{
width: 960px;
height: 960px;
background:#ABC;
margin: 0 auto 0 auto;
}
/* minor stuff */
a{ text-decoration: none; color:red; }
ul, li{ list-style-type:none }
/*===================================
set the nav menu link stuff
===================================*/
#navmenu{
float:left;
margin-left: 50px;
background: white;
width:80px;
height:25px;
line-height:25px;
padding:3px;
}
#navmenu a:hover{ color:green; }
#navmenu a:focus{ font-size:16pt; text-decoration:underline; color:green; }
/* Set stuff up in our span but hide it */
li > span{
display:none;
width:875px;
height:800px;
float:left;
background:white;
color:grey;
text-indent:15px;
padding-right:3px;
padding-left:6px;
margin-top:30px;
}
/* show span stuff when link is clicked on */
li > input[type="checkbox"]{
display:none;
}
li label{
cursor:pointer;
}
li > input[type="checkbox"]:checked + label + span{ display:block; }
/* Thumbnail parameters when link is clicked */
li > input[type="checkbox"]:checked + span .thumb_image{
display:inline-block;
float:left;
position:relative;
background:red;
outline:1px solid red;
}
/* minor thumnail stuff */
li > input[type="checkbox"]:checked + label + span .thumb_image:hover{ outline:3px solid rgba(0,255,0, 1); }
/* ===================================
large image stuff parameters
=====================================*/
/* Set up and Hide large image with z-index */
li > input[type="checkbox"] + label + span span{
z-index:-200;
display:inline-block;
float:left;
color:black;
width:600px;
padding:4px;
position:absolute;
background:rgba( 255, 250, 108, .25);
outline:1px solid darkgrey;
text-align:center;
margin: -0px 0 0 150px;
}
/* bring large image into view when thumbnail is hovered */
li > input[type="checkbox"]:checked + label + span a:focus+span, li > input[type="checkbox"]:checked + label + span a:hover+span{ z-index:10; }
/*
li >a:focus+span .thumb_image:hover+.large_image{ z-index:10; }
li > a+span .large_image{
z-index:-200;
display:inline-block;
float:left;
color:black;
width:600px;
padding:4px;
position:absolute;
background:rgba( 255, 20, 108, .5);
border:1px solid black;
text-align:center;
margin: -0px 0 0 175px;
}
*/
关于html - 单击缩略图后不会保留大图像。仅限 HTML 和 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11337932/