本文介绍了使用jQuery,如何在悬停链接时更改图片?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个链接列表(一个文本菜单),当每个链接都被占用时,我需要在其他区域更改图片...
图片需要在同一个地方展示,让我们来说一个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,如何在悬停链接时更改图片?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!