Элемент Jquery «Highlight» с тем же классом - PullRequest
Новая
       10

Элемент Jquery «Highlight» с тем же классом

2 голосов
/ 20 января 2011

Я пытаюсь добиться этого:

У меня есть что-то вроде: 

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

Я хочу, чтобы каждый раз, когда пользователь наводил указатель мыши на одну из областей, изображение с соответствующим классом получало красную рамку. Как я могу добиться этого ??

Большое спасибо всем, я надеюсь, что вы можете помочь мне с этим.

1 Ответ

5 голосов
/ 20 января 2011

Вы можете сделать это:

Пример: 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','');
});
...