我确实尝试过一切都知道干了:(鼠标在缩略图上显示它应该在页面的其余部分放大图像。如果我在图像之间交换图像应该放大。有3个图像,即2个缩略图和一个主图片在lil big img中说“I”,在页面的左侧部分,当我鼠标悬停或悬停在“I”上时,它应该在右边的包含3个图像的滑块上显示一个放大的图像应该一次显示一张图片......我希望我已经澄清了
<style>
.product .content .imgdiv .bottlesWrapper .ablahh{
position: relative;
z-index: 0;
}
.product .content .imgdiv .bottlesWrapper .ablahh:hover{
background-color: transparent;
z-index: 50;
}
.product .fltimg .thumbnail span{ /*CSS for enlarged image*/
width:200px;
height:200px;
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: visible;
color: black;
text-decoration: none;
}
.product .fltimg .thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.product .fltimg .thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top:10px;
left: 60px; /*position where enlarged image should offset horizontally */
}
</style>
<div class="fltimg">
<a href="#" class="thumbnail"><span>
<img id="largeImage" src="images/1.jpg"/></span></a>
</div>
<div class="content">
<p class="note">Fields with <span class="required">*</span> are required.</p>
<div class="imgdiv">
<div class="bottlesWrapper">
<a href="#" class="ablahh">
<img id="blah" class="i1" src="#" width="115px" height="120px"/></a>
</div>
<div class="thumbs">
<a href="#" class="ablah1"> <img id="blah1" class="i2" src="#" width="50px" height="20px"/></a>
<a href="#" class="ablah2"><img id="blah2" class="i3" src="#" width="50px" height="20px"/></a>
</div>
</div>
<!-- <a href="#" class="ablah"> <span> <img id="blah0" class="i11" src="#" width="500px" height="300px"/> </span> </a>-->
<div class="title4">
<input class="file" name="logo" type="file"/>
</div>
<div class="title4">
<input class="file1" id="files1" name="files1" type="file" />
</div>
<div class="title4">
<input class="file2" id="files2" name="files2" type="file"/>
</div>
</div>
请告诉我如何实现这一目标。我对此失去了理智。 :(谢谢你