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