Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

How to Work with CSS3 Event Selectors

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.

    image0.jpg
  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.

blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.