使用jQuery悬停状态

Question

我知道悬停状态可以通过css完成，这通常是我更喜欢接近它们但是在这种特殊情况下，我将鼠标悬停在一个有几个孩子的整个元素上，我想要实现的效果是将所有文本（无论是在span还是p标签中）变为白色。

我在这里有一个codepen http://codepen.io/MARS/pen/jlqxK?editors=101对代码进行采样，我不确定我是否可以通过用逗号分隔来一次定位多个元素，但我在这个例子中尝试过。

我在尝试定位的ul中有跨度和p标签的组合，但我觉得我没有正确定位所有元素，这就是为什么文本在悬停时不会变为白色。

当前唯一更改为白色的文本是我在css中声明的文本。

有人能建议更好的方法吗？

谢谢。

Answer 1

您应该只能在CSS中执行此操作：

ul.qaUl:hover span.q,p.qP,span.A,p{
  color:#fff;
}

如果ul.qaUl下的所有内容都应该变为白色，你可以这样做：

ul.qaUl:hover *{
   color:#fff;
}

显然，只有当您的选择器具体到足以覆盖其他样式时，这才有效。

Answer 2

我认为你的选择器应该是这样的：

$('span.q, p.qP, span.genA, p')

除此之外，你有css样式，通过级联更具体，所以你要么必须制作一个特定的白色类，要么在分号前添加！important为重要的

显然，只有当您的选择器具体到足以覆盖其他样式时，这才有效。

你也错过了“）;”在你的javascript结尾。

Answer 3

你应该在jquery hover或css：hover之间做出选择，如果你使用所有这些来改变风格，它会发生冲突

Answer 4

与杰克的答案类似，jQuery的变体是使用类似的东西：

$("#parent").mouseover(function(){
    $(this).find("*").addClass('white');
});

.find("*")以递归方式定位所选元素的所有子项