How to Work with CSS3 Event Selectors - dummies

How to Work with CSS3 Event Selectors

By John Paul Mueller

Most CSS3 changes are static — you ask the browser to look for specific tags, attributes, or patterns. However, event selectors choose objects based on a particular event, such as a mouse over.

When the user hovers the mouse pointer over an object, the object’s formatting changes to signify that the event has occurred. When the user moves the mouse pointer off of the object, the formatting returns to normal. The following list tells you about event selectors that documents commonly use.

  • :hover: Selects an object when the mouse pointer is hovered over it. Developers commonly use this feature to show that an item is selected or to display details about an object. You see this feature used quite often with menu systems to display the submenu items.

  • :focus: Selects an object when the object has the input (keyboard) focus. It’s commonly used with forms to show which field is selected for input. One interesting use of this selector is to show the selected field in a larger-sized font to make input easier.

Event selectors are handy because you can use them to make it appear the page is interacting with the user without writing even one line of code. Everything happens as part of a style. The following procedure shows one way to use event selectors to produce a visual effect.

  1. Create the ExternalCSS.HTML and ExternalCSS.CSS files and copy them to a new folder.

  2. Open ExternalCSS.CSS.

  3. Type the following code after the existing styles and save the changes to disk.

    p:hover, h1:hover
     text-decoration: none;
     font-family: "Arial", sans-serif;
     font-size: xx-large;
     color: BlueViolet;
     background-color: Plum;
  4. Reload the test page.

  5. Hover the mouse pointer over the paragraph text.

    You see the effect of making the style change. The style of the text changes to match the selection criteria.


  6. Hover the mouse over the header text.

    The paragraph text returns to normal and the header text now matches the selection criteria. You can use this approach with any object on screen and make any kind of change desired.