使用jquery，悬停链接时如何更改图像？答案

【问题标题】：using jquery, how to change an image when hovering links?使用jquery，悬停链接时如何更改图像？
【发布时间】：2010-11-26 15:20:19
【问题描述】：

我有一个链接列表（一个文本菜单），当每个链接悬停时，我需要更改其他区域中的图像...

图像需要显示在同一个地方，比如说右边的一个 100x100 区域... 有什么想法可以实现吗？

每个链接都可以有图片的src吗？不知道怎么做:(

【问题讨论】：

标签： jquery image hyperlink hover

【解决方案1】：

不是一个完整的答案，但这将引导您找到真正的解决方案。

$("a")
  .hover( function(){ $("#some-div").css( "background", "my-image.jpg" ) );

【讨论】：

【解决方案2】：

你可以把图片的src存放在a的rel标签里吗？

<a href="#" rel="../images/myPicture.jpg">Anchor Link</a>

然后使用 elcuco 的解决方案，但稍作改动。

$("a")
  .hover( function(){ $("#some-div").css( "background", $(this).attr('rel') ) );

【讨论】：

【解决方案3】：

给定以下 HTML：

<ul>
  <li><a href="#" id="link1">Link Number 1</a></li>
  <li><a href="#" id="link2">Link Number 2</a></li>
  <li><a href="#" id="link3">Link Number 3</a></li>
  <li><a href="#" id="link4">Link Number 4</a></li>
  <li><a href="#" id="link5">Link Number 5</a></li>
</ul>
<ul>
  <li><img src="image1.jpg" /></li>
  <li><img src="image2.jpg" /></li>
  <li><img src="image3.jpg" /></li>
  <li><img src="image4.jpg" /></li>
  <li><img src="image5.jpg" /></li>
</ul>

使用以下 JavaScript（带有 jQuery）：

$(function(){
  $(".images img").hide();
  $(".links a").hover(function(){
    $(".images img").hide();
    $("#image"+/(\d+)$/.exec(this.id)[1]).show();
  }, function(){
    $(".images img").hide();
  });
});

【讨论】：

请注意，这要求所有图片都随页面一起加载。

【解决方案4】：

假设每个链接都包含要显示的图像的href，并且可以通过类来识别，例如link-image。此外，假设显示区域设置了一个固定的 id，imageDisplay。

$('a.link-image').hover(
    function() {
        $('#imageDisplay').children().remove();
        $('<img src="' + $(this).attr('href')  + '" alt="" />')
           .css( { height: 100, width: 100 } )
           .appendTo( '#imageDisplay' );
    },
    function() {
        $('#imageDisplay').children().remove();
        $('<span>No image available</span>').appendTo( '#imageDisplay' );
    }
);

您实际上可能想要使用hoverIntent 插件来防止鼠标在链接上移动时闪烁。

通常，您会将此与禁用默认链接行为的链接上的单击处理程序结合使用。

$('a.link-image').click( function() { return false; } );

请注意，您可以简单地将点击处理程序链接到悬停处理程序。

【讨论】：

【解决方案5】：

如果它不是语义的，并且仅用于演示，我会使用类和 CSS。

$('.imageList li').hover(
function() {
    $('#imageDisplay').addClass($(this).attr("class"););
},
function() {
    $('#imageDisplay').removeClass($(this).attr("class"););
}
);

标记

<ul class="imageList">
    <li class="deer">Show me a deer</li>
    <li class="cow">Show me a cow</li>
</ul>
<div id="imageDisplay" />

CSS

#imageDisplay {
   width:200px;
   height:200px;
}
div.deer {
   background:red;
}
div.cow {
   background:blue;
}

【讨论】：