jQuery: не удается найти тег только под текущим селектором класса

Question

У меня есть это:

HTML:

<p class="Link"><a href="...">Test1</a></p>
<p class="Link"><a href="...">Test2</a></p>
<p class="Link"><a href="...">Test3</a></p>

jQuery

$(document).ready(function() {
    $('.Link').hover(function() {
        $('.Link a').css('color', 'black');
    }, function() {
        $('.Link a').css('color', 'white');
    });
});

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

Спасибо!

Answer 1

Вам необходимо использовать this, который относится к конкретному элементу, получившему событие.

$(document).ready(function() {
    $('.Link').hover(function() {
             // Get the <a> element from within the context of
             //    the element that received the event, represented
             //    by "this" 
        $('a',this).css('color', 'black');
    }, function() {
        $('a',this).css('color', 'white');
    });
});

Выполнение:

$('a',this).css('color', 'black');

равно эффективно так же, как и:

$(this).find('a').css('color', 'black');

• http://api.jquery.com/find/

Конечно, вы всегда можете сделать это, используя только CSS.

---

EDIT:

Если все, что вы делаете - это изменяете некоторые атрибуты CSS, вам не нужен Javascript.

Чтобы использовать чисто CSS-подход, сделайте следующее:

.Link a {
    color: black;
}

.Link a:hover {
    color: white;
}

Поскольку вы делаете это для элемента <a>, он поддерживается в IE6. Начиная с IE7 (и большинства других браузеров), вы можете использовать ту же технику и для других элементов.

Answer 2

Вы можете использовать селектор $ (this) внутри события, чтобы быстро ссылаться на элемент, над которым наведен курсор.После этого вы можете использовать .find (), чтобы найти любые элементы внутри него.

Код:

$(document).ready(function() {
    $('.Link').hover(function() {
        $(this).css('color', 'black');
        $(this).find("a").css('color', 'black');

    }, function() {
        $(this).css('color', 'white');
        $(this).find("a").css('color', 'white');
    });
});

Answer 3

$(this).find("a").css("color", "black");

должно сработать.

Проблема в том, что ".Link a" соответствует ВСЕМ якорям в абзаце.Вы, вероятно, должны снова прочитать CSS с таким недоразумением!