jquery - Javascript 替代 CSS 选择器

Question

使用 jQuery，我将如何改变 <span> 的样式元素，当图像悬停在每个帖子中时？

这是 HTML 结构的示例:

<img src="#" class="postone">

<div class="description">
    <p><span class="postone"> text </span> other text </p>
</div>


<img src="#" class="posttwo">

<div class="description">
    <p><span class="posttwo"> text </span> other text </p>
</div>

这是我已经拥有的 jQuery:

$(document).ready( function(){

    $("img").hover( function(){

        var className = $("this").attr('class');
        $("span" + className).css("color", "#fff");

    });

});

Answer 1

两个问题:

1. this 是关键字，不是字符串，因此引号应该去掉。

   var className = $(this).attr('class');
   

2. 您的选择器中缺少句点。 className 值不包含此句点，因为 class 属性包含类名，而不是类选择器，因此您必须自己将其放入选择器字符串中。

   $("span." + className).css("color", "#fff");
   

话虽如此，我真的不明白为什么不能用 CSS 做到这一点:

img:hover + .description span {
    color: #fff;
}