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

首先，当鼠标悬停在段落上时，我需要更改 anchor 颜色，而不仅仅是 anchor 。其次，我需要在不为每个段落或 anchor 创建唯一 ID 的情况下执行此操作。按照原样的代码，它会更改所有三个 anchor 标记的颜色。我只希望它更改我当前悬停在其上的段落中包含的 anchor 的颜色。这可能吗？

谢谢!

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 来完成此任务。

<小时/>

编辑:

如果您所做的只是更改一些 CSS 属性，那么您实际上并不需要 javascript。

要使用纯 CSS 方法，请执行以下操作:

.Link a {
    color: black;
}

.Link a:hover {
    color: white;
}

因为您正在 <a> 上执行此操作元素，IE6支持。从 IE7(以及大多数其他浏览器)开始，您也可以在其他元素上使用相同的技术。