如何通過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);
  }
});