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

Â