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属性可以更改为显示您想要的任何图像，它实际上是无关紧要的。毕竟，用户只能点击他们已经过去的东西。

添加href链接到通过js mouseover

1 个答案: