添加href链接到已通过js鼠标悬停显示的图像

Question

我有三个图像，每个图像都会在鼠标悬停时变为第二个图像。在鼠标悬停时，他们也将其他人重置为标准图像。这一切工作正常。

但是..

我想每个第二图像是可点击链接到另一个页面。

希望有人能帮助，非常感谢。

$(document).ready(function(){ 
    $('#s1').mouseover(function(){ 
     $('#s1').attr('src', 'images/object/click-1.png'); 
      $('#s2').attr('src', 'images/object/standard-2.jpg'); 
      $('#s3').attr('src', 'images/object/standard-3.jpg'); 
    }); 
    $('#s2').mouseover(function(){ 
     $('#s1').attr('src', 'images/object/standard-1.jpg'); 
      $('#s2').attr('src', 'images/object/click-2.png'); 
      $('#s3').attr('src', 'images/object/standard-3.jpg'); 
    }); 
    $('#s3').mouseover(function(){ 
      $('#s1').attr('src', 'images/object/standard-1.jpg'); 
      $('#s2').attr('src', 'images/object/standard-2.jpg'); 
      $('#s3').attr('src', 'images/object/click-3.png'); 
    }); 


}); 

所以这些链接需要在click-1.png，click-2.png，click-3.png。

<div id="section3" class="container-fluid" align="center"> 
    <div class="row row-centered "> 
    <div id="top-box-1" class="col-sm-4"> 

    <img src="images/object/standard-1.jpg" id="s1" width="300" height="300" /> 
    </div> 


    <div id="top-box-2" class="col-sm-4"> 

    <img src="images/object/standard-2.jpg" id="s2" width="300" height="300" /> 
    </div> 


    <div id="top-box-3" class="col-sm-4"> 

    <img src="images/object/standard-3.jpg" id="s3" width="300" height="300" /> 
    </div> 
    </div> 
    </div> 

Answer 1

只要让每个图像标记（s1，s2和s3）成为一个链接。 img标签的实际src属性可以更改为显示您想要的任何图像，这实际上是不相关的。毕竟，用户只能点击他们所挖掘的东西。