Jquery'Highlight'元素具有相同的类

Question

我想尝试这个:

我有类似的东西:

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