0
我想这样做，当用户将鼠标悬停或点击缩略图时，它会使图片变大。我环顾四周的答案，但似乎没有什么工作对我来说（我已经尝试了jQuery，CSS），这里是我的代码：HTML图片库使用缩略图更改放大图片
body {
padding:0;
margin:0;
}
#active {
background-color: #27629f;
}
#active:hover {
background-color: #27629f;
}
.mainContainer {
margin: 0 auto;
padding: 0;
width:100%;
max-width: 860px;
height:3000px;
background: #27629f;
position: relative;
}
.txtContainer {
margin: 0 auto;
padding: 0;
width:99%;
text-align: center;
}
.imgContainer {
margin: 0 auto;
padding: 0;
width:800px;
text-align: center;
}
.txtContainer p{
font-family: "Century Gothic", "verdana", sans-serif;
font-size: 20px;
color:#e0ebff;
}
.txtContainer heading{
font-family: "Century Gothic", "verdana", sans-serif;
font-size: 26px;
color:white;
}
.gallery {
}
.gallery li{
list-style: none;
}
.gallery img{
float:left;
margin:5px;
padding-left: 4px;
border:1px solid black;
}
.galleryHeading {
font-size: 20px;
font-family: "Century Gothic", "verdana", sans-serif;
color:white;
margin:0;
padding:0;
}
/*-------------------- Nav Bar Below ------------------*/
.nav {
}
.nav ul {
list-style: none;
background-color: #3b6da1;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: "Century Gothic", "verdana", sans-serif;
font-size: 16px;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #2e4c6c;
}
.nav a {
text-decoration: none;
color:#fff;
display: block;
transition: .3s cubic-bezier(.47, .28, .36, .67);
}
.nav a:hover {
z-index: 2;
background-color: #034995;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
@media screen and (min-width: 700px) {
/* This changes the settings to look better for larger monitors */
.nav li {
width: 175px; /* Divide the total amount of nav buttons to get this resualt this by the min width */
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 18px;
}
/* Floats left so if screen is larger than 600px is wont look funny */
.nav li {
float:left;
}
/* Fixes the colord background */
.nav ul {
overflow: auto;
width: 700px;
margin: auto;
}
.nav {
background-color: #3b6da1;/* Cover the whole of the top */
}
.imageMapping:hover{
height:460px;
}
}<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li id="active"><a href="#">Mapping</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="mainContainer">
<br/>
<div class="txtContainer">
<heading>Mapping</heading>
<p>
This page contains images of all my maps.
</p>
</div>
<br/>
<div class="imgContainer" >
<div id="galleryHeading">CS:GO - Mapping</div>
<p>
</p>
<br/>
<div class="gallery">
<img src="1.png" alt="" height="150px" width="250px;"/>
<img src="2.png" alt="" height="150px" width="250px;"/>
<img src="3.png" alt="" height="150px" width="250px;"/>
<img src="OneToChange.png" alt="" height="450px" width="782px;"/>
<img src="4.png" alt="" height="150px" width="250px;"/>
<img src="5.png" alt="" height="150px" width="250px;"/>
<img src="6.png" alt="" height="150px" width="250px;"/>
</div>
</div>
</div>我想通了！ Heres what i wanted to do.