Question

我有一个带缩略图的画廊，将鼠标悬停在缩略图上后，主照片将变为悬停的照片。但是我需要放大主照片的帮助。

我尝试了许多免费的放大脚本，但是没有一个效果很好。总是在我将鼠标悬停在其他任何缩略图上然后又在主照片上徘徊时，它会显示上一个缩略图或无效。

HTML

<div class="imgBox"><a href="big/default1.png">
    <img src="small/default1small.png" class="zoom"/>
</a></div>

<ul class="thumb">
  <li>
    <a onclick="return false" target="imgBox" href="small/default1small.png">
      <img src="small/default1small.png"/>
    </a>
  </li> 
  <li>
    <a onclick="return false" target="imgBox" href="small/default2small.png">
       <img src="small/default2small.png"/>
    </a>
  </li>
</ul>

JS与JQUERY

$(document).ready(function(){ $('.thumb a').mouseover(function(e){
    e.preventDefault();
    $('.imgBox img').attr("src", $(this).attr("href"));
    $('.imgBox a').attr("href", $(this).attr("href"));
    $('.imgBox a .magnify .magnify-lens').css("background","url('$(this)') 0px 0px no-repeat");
        }) 
    })

将鼠标悬停在缩略图上并再次悬停在主照片上之后，我希望它可以正确放大

https://codepen.io/anon/pen/zgxaRX

放大-悬停在缩略图库中

0 个答案: