CSS Pseudo Class Selectors

These are really helpful for mouse over and mouse click effects. Here are a couple of examples used with buttons in our application. The hover property applies when the user mouses the mouse over the element.

This is an example of making a button change it’s foreground and background colour when we move the mouse over:

.BUTTONcancel:hover {
   background-color: gray;
   color: white;
   transition: 70ms ease-in;  /* Means that the hover style comes in a gradual way */
}

The transition property just means that there is a slight delay of applying the style. CSS has quite a sophisticated range of transition effects which can be implemented.

The :active psuedo selector applies when the mouse is depressed on an element.

/*  When the mouse button is depressed */
.BUTTONcancel:active {
   background-color: darkgray;
}

Concepts

CSS Pseudo Class Selectors

Analytics

Related content