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',''); 
});