将鼠标悬停在图像上以在滑块中显示其放大的图像,并在页面右侧的滑块中显示所有图像

时间:2013-12-21 11:03:10

标签: jquery css mouseover jquery-hover mousehover

我确实尝试过一切都知道干了:(鼠标在缩略图上显示它应该在页面的其余部分放大图像。如果我在图像之间交换图像应该放大。有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>

请告诉我如何实现这一目标。我对此失去了理智。 :(谢谢你

0 个答案:

没有答案