Question

i’m trying to acchive this:

I have something like:

<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" />

I want that everytime the user pass the mouse over one of the the ul>li the image with the matching class gets a red border. How can I acchieve this??

Thanks so much to everyone, I hope you can help me out with this.

Answer 1

You could do this:

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

or if you’re certain that the <li> elements won’t have any whitespace around their <a>, you could make it a little shorter:

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

Or if you wanted the hover to take place on the <a>, then do this:

Example: http://jsfiddle.net/Q7knH/3/

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