使用 jQuery 悬停状态答案

【问题标题】：Hover state using jQuery使用 jQuery 悬停状态
【发布时间】：2014-06-25 23:59:05
【问题描述】：

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

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

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

当前唯一变为白色的文本是我已经在我的 css 中声明的那个。

任何人都可以提出更好的方法吗？

谢谢。

【问题讨论】：

标签： jquery css

【解决方案1】：

与 Jack 的回答类似，jQuery 变体将使用如下内容：

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

.find("*") 递归地针对选定元素的所有子元素

【讨论】：

【解决方案2】：

你应该在 jquery hover 或 css :hover 之间进行选择，如果你使用它们来改变样式相同的颜色会发生冲突

【讨论】：

【解决方案3】：

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

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

除此之外，您还可以通过级联获得更具体的 css 样式，因此您要么必须创建一个特定的白色类，要么在分号前添加 !important 到颜色

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

您还缺少“);”在您的 javascript 末尾。

【讨论】：

【解决方案4】：

你应该可以在你的 CSS 中做到这一点：

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

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

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

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

【讨论】：