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

Add href link to Image that has been displayed via js mouseover

本文关键字：悬停 鼠标 显示 图像 js 链接 href 添加      更新时间：2023-09-26

我有三个图像，每个图像在鼠标悬停时都会变成第二个图像。在鼠标悬停时，他们还将其他图像重置为标准图像。这一切都很好。

然而。。

我希望第二张图片中的每一张都是指向另一个页面的可点击链接。

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

$(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>

只需使每个图像标记（s1、s2和s3）成为一个链接。img标记的实际src属性可以更改为显示您想要的任何图像，这实际上是无关紧要的。毕竟，用户只能点击他们鼠标悬停的东西。

相关文章：