使用jquery，如何在hover链接时更改图像？

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

图像需要在同一个地方显示，让我们说在右边100×100区域…任何想法实现这一点？

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

Answer 1

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

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

Answer 2

你可以将图像的src存储在a的rel标签中吗？

 Anchor Link 

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

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

Answer 3

给出以下HTML：

 
 
Link Number 1
 
Link Number 2
 
Link Number 3
 
Link Number 4
 
Link Number 5
 
 
 
 
 
 
 
  

使用以下JavaScript（使用jQuery）：

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

Answer 4

假设每个链接保持要显示的图像的href，并且可以通过类识别，例如link-image 。 此外，假设显示区域设置有固定ID， imageDisplay 。

 $('a.link-image').hover( function() { $('#imageDisplay').children().remove(); $('') .css( { height: 100, width: 100 } ) .appendTo( '#imageDisplay' ); }, function() { $('#imageDisplay').children().remove(); $('No image available').appendTo( '#imageDisplay' ); } ); 

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

通常情况下，您可以通过链接上的单击处理程序将其与禁用默认链接行为相结合。

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

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

Answer 5

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

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

MARKUP

 
 
Show me a deer
 
Show me a cow
 
 
 

CSS

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