将href链接添加到已通过js mouseover显示的图像

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 属性可以更改以显示您想要的任何图像，这真的无关紧要。毕竟，用户只能点击他们鼠标悬停的东西。