如何通过jQuery将鼠标悬停时更改的图像添加链接？

Question

我在导航下方有一个图像，该图像根据鼠标悬停在哪个导航项而变化。 这是代码：

$(document).ready(function() {
    $('.nav-item').mouseenter(function() {
      var img = $(this).attr('data-headerimg'); 
      $('img#header-img').attr('src', img);
    }).mouseleave(function() {
      var img = $(this).attr('data-headerimg');
      $('img#header-img').attr('src', img);
    });
});

我希望图像是指向其相应页面的链接，但是我不确定如何通过jQuery来实现。 任何帮助将不胜感激。

Answer 1

首先，将图像包含在HTML的锚点中： <a><img ....></a> 。 把旁边的链接data-headerimg ，在data-headerlink属性。

其次，将锚点的href更新为与设置图片的src相同的值：

var img = $(this).attr('data-headerimg'); 
var href = $(this).attr('data-headerlink'); 
$('img#header-img').attr('src', img).parent().attr('href', href);

Answer 2

用html中的href标记环绕它

<a id="headerimglink" href=""><img src="" /></a>

设置href属性和src属性，或者如果没有改变，也可以对其进行硬编码。

Answer 3

为什么要发送图像请求并等待服务器响应图像数据？ （有些用户觉得这很烦人）为了预加载图像，您可以简单地创建所需的标签，而只需在项目悬停时交换display （带有淡入淡出？）。

比方说：

<ul id="list">
   <li>Football</li>
   <li>Barbara</li>
</ul>
<div id="images">
   <a href="foo.html"><img src="foo.jpg" alt="Foo"></a>
   <a href="bar.html"><img src="bar.jpg" alt="Bar"></a>
</div>

#images a {
    display:none;
    position:absolute;
    /* etc */
}

var $imgLink = $('#images a');
$('#list li').hover(function( e ) {
  $imgLink.stop().fadeTo(300, 0);
  if(e.type=="mouseenter") {
      $imgLink.eq( $(this).index() ).fadeTo(300, 1);
  }
});