Question

我用这个css

fa-info {
  background-color: green;
  font-size: 30px;
}
fa-info .active {
  background-color: black;
  font-size: 25px;
}

使用此标记

 <fa-info>test</fa-info>

和这个jquery代码

$(document).ready(function(){
    $('fa-info').bind('mouseover', function(){
       $(this).addClass('active');
    });
    $('fa-info').bind('mouseout', function(){
        $(this).removeClass('active');
    });
});

不工作

如果我将css代码更改为

fa-info {
  background-color: green;
  font-size: 30px;
}
.active {
  background-color: black;
  font-size: 25px;
}

这有用吗？

感谢

Answer 1

当您指定这样的选择器时：

fa-info .active

您要求fa-info的孩子拥有.active课程。那不是你的情况。

要在fa-info对象本身上拥有活动类，您的CSS规则必须是：

fa-info.active {
  background-color: black;
  font-size: 25px;
}

fa-info和.active之间没有空格。这表明你想要他们在同一个对象上。

总结：

/* CSS rule that targets a child of fa-info with the active class */
fa-info .active {
  background-color: black;
  font-size: 25px;
}

/* CSS rule that targets a fa-info with the active class on the same object */
fa-info.active {
  background-color: black;
  font-size: 25px;
}

Answer 2

如果应该

fa-info.active

没有空间。这是'给我一个关于课程active'

的fa-info标签带有空格的

fa-info .active表示'在fa-info标记内为active类提供任何内容'

Answer 3

使用选择器：

fa-info .active

您正在使用班级fa-info

搜索.active元素的后代

如果要指向具有两个属性的元素，请删除它们之间的空格，例如：

fa-info.active

演示：http://jsfiddle.net/8U3rG/

参考：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors

例如，选择器.key选择具有的所有元素类名密钥。选择器p.key仅选择<p>个元素有班级名称密钥。

jquery addClass子选择器失败

3 个答案: