CODEWITHSUNDEEP
javascripthtmlcss
Peter
Peter

Reputation: 59

Css class active

I have small problem with css and jQuery. I have 2 buttons and I want to set the background of the one clicked to blue, and I want to do this with 'active' css property. It is not working for some reason. Whenever the button is not active anymore, it loses the background color. Here is the code: HTML:

<div id = 'hey'>
  <div class = 'b' id = 'b1' href="#">Button one</div>
    <div class = 'b' id = 'b2' href="#">Button Two</div>
</div>

CSS: 

body,html { 
  font: bold 14px/1.4 'Open Sans', arial, sans-serif;
  background: #000;
}
#hey { 
  margin: 150px auto 0; 
  padding: 0; 
  list-style: none; 
  display: table;
  width: 600px;
  text-align: center;
}

.b {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.15em;

  display: inline-block;
  padding: 15px 20px;
  position: relative;
}
.b:active {
  background-color: blue;
}

JS: 

  $(".b").click(function() {
    $(this).addClass('active');
  });

Upvotes: 0

Views: 2159

Answers (2)

Nikhil Goyal
Nikhil Goyal

Reputation: 1973

:active is pseudo-element and you are trying to add active as a class. So the CSS should be

.b.active {
  background-color: blue;
}

Upvotes: 0

Quentin
Quentin

Reputation: 943157

:active is a pseudo-class meaning "while being activated" (typically while the mouse button is held down over it).

You are giving it a class active so you need to use a class selector: .active (with a . not a :).

I suggest not using class names which match pseudo-class names as it is an easy source of confusion.

Upvotes: 5

Related Questions