jQuery的“亮点”与同一类

Question

我试图acchive这个元素：

我有类似：

<ul> 
<li><a href="#" class="class-1">Link 1</a></li> 
<li><a href="#" class="class-2">Link 2</a></li> 
<li><a href="#" class="class-3">Link 3</a></li> 
</ul> 

<img src="img-desc.jpg" class="class-1" /> 
<img src="img-desc-1.jpg" class="class-2" /> 
<img src="img-desc-2.jpg" class="class-3" /> 

我想要每次用户通过鼠标的一ul> li与匹配的类的图像获取红色边框。我怎样才能实现这个？

非常感谢大家，我希望你能帮助我解决这个问题。

Answer 1

你可以这样做：

例子：http://jsfiddle.net/Q7knH/

$('ul > li').hover(function() { 
    $('img.' + $(this).children('a').attr('class')).css('border','2px solid red'); 
},function() { 
    $('img.' + $(this).children('a').attr('class')).css('border',''); 
}); 

，或者如果你是肯定的<li>元素将不会有他们的<a>周围的任何空白，你可以把一个短一点：

例如：http://jsfiddle.net/Q7knH/1/

$('ul > li').hover(function() { 
    $('img.' + this.firstChild.className).css('border','2px solid red'); 
},function() { 
    $('img.' + this.firstChild.className).css('border',''); 
}); 

或者，如果你想悬停发生在<a>，那么这样做：

例子：http://jsfiddle.net/Q7knH/3/

$('ul > li > a').hover(function() { 
    $('img.' + this.className).css('border','2px solid red'); 
},function() { 
    $('img.' + this.className).css('border',''); 
});