jQuery的addClass孩子選擇失敗

我用這個CSSjQuery的addClass孩子選擇失敗

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

這是爲什麼？

感謝

來源

2014-02-19 Martin Schäpker

當您指定這樣的選擇：

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

來源

2014-02-19 21:25:06 jfriend00

不錯的作品，但sass用fa-info編譯css文件.active –

@MartinSchäpker - 那麼你可能使用了錯誤的sass語法。 – jfriend00

我加了一個＆在它的工作感謝所有 –