Text not changing color with jquery addClass()

Question

http://jsfiddle.net/GHJX5/

I have a div with blue text and I want it to change on hover to yellow. For some reason, if I remove the CSS part that sets it blue it will change to yellow on hover, but if it's set to blue it will not.

JS

$('#registerbutton').hover(
    function() {
        $('#registerbutton').addClass('asd');
    }, function() {
        $('#registerbutton').removeClass('asd');
    }
);

HTML

<div id="registerbutton">click</div>

CSS

#registerbutton{
    color:blue;
}
.asd{
    color:yellow;
}

Answer 1

An ID is more specific than a class, therefore the class gets overruled. Try this instead:

#registerbutton.asd {
    color:yellow;
}

jsFiddle example

To learn more about CSS specificity, see https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Answer 2

为什么你不使用简单的CSS属性悬停像这样

#registerbutton:hover{color:yellow;}