jquery addClass 子选择器失败

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

您正在请求具有 .active 类的 fa-info 子级。这不是你的情况。

要在 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;
}