1

Please see the JSFddle - http://jsfiddle.net/ww2010ku/ . below is the jQuery code -

$("#x").click(function () {
$(this).animate({
    "height": "45px",
        "width": "45px"
}, 100);
$(this).addClass("lg");
});

I have 2 questions. 1) Why on click does the blue border show up though I have done border: none. 2) Why doesn't the "lg" class take precedence and show up green color button since red would ideally be the color set first and then green which comes as the last rule and take precedence.

Nikhil Pai
  • 127
  • 1
  • 7

2 Answers2

2

1) that "blue border" is called outline, is used in focused inputs, to unable it you have to add

button:hover {outline:0}

2) because the id is unique in an element but the class is not, so the id selector has higher priority and the properties inside it would be taken before the ones in the class selector, you could change ".lg" to "#x.lg". the more sepecific is a selector in css, the more hierarchy gets. PD: sory for my bad english

Jiancerouno Taringa
  • 61
  • 5
1
  1. The border is caused by the :focus outline on the element. You can get rid of it like so:

#x:focus {
    outline: 0;
}
  1. #x is more specific than .lg, so this is why the background color doesn't take precedence. You can change this by making the css #x.lg which will again win the specifity battle.

jsFiddle here

Community
  • 1
  • 1
StuartLC
  • 104,537
  • 17
  • 209
  • 285