使用jQuery，如何在悬停链接时更改图片？ [英] using jquery, how to change an image when hovering links?

问题描述

我有一个链接列表（一个文本菜单），当每个链接都被占用时，我需要在其他区域更改图片...

图片需要在同一个地方展示，让我们来说一个100x100的区域吧...
任何想法都可以达到这个目的？

可以每个链接都有src的图像？不知道该怎么做：（

）

解决方案

我会使用类和CSS。

  $（'。imageList li'）。hover（
 function（）{ 
 $（'＃imageDisplay'）。addClass（$（this）.attr（class）;）; 
}，
 function（）{
 $（'＃b $ b' imageDisplay'）。removeClass（$（this）.attr（class）;）; 
} 
）; 
  

MARKUP

 < ul class =imageList> 
< b< ; li class =deer>向我展示一只鹿< / li> 
< li class =cow>向我展示一头牛< / li> 
< / ul> 
< div id =imageDisplay/> 
  

CSS

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

I have a list of links (a text menu), and I need to change an image in other area when each link is hovered...

the images need to be showed in the same place, lets say a 100x100 area at right... any idea to achieve this?

can each link have the src of the images? no idea how to do it :(

解决方案

If its not semantic, and only for presentation, I would use classes and CSS.

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

MARKUP

<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;
}

这篇关于使用jQuery，如何在悬停链接时更改图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！