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

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

谢谢！

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（以及大多数其他浏览器）开始，您也可以在其他元素上使用相同的技术。

Answer 2

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

应该这样做。

问题是，“。链接a”匹配段落中的所有锚点。你可能应该再次阅读这种误解了！

Answer 3

您可以在事件中使用选择器$（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');
    });
});

jQuery：无法在当前类选择器下找到标记

3 个答案: