Add a rollover effect

Add a rollover effect

Now you’ll add a rollover effect so that the background color of the navigation bar blocks change whenever the mouse pointer passes over one of the links. To add a rollover effect, add a new rule that contains the :hover pseudo-class.

  1. Open the cafe_townsend.css file.
  2. Select the entire .navigation rule.

    This is a picture of the feature being described.

  3. Copy the text (Edit > Copy).
  4. Click once at the end of the rule and press Enter (Windows) or Return (Macintosh) a few times to create some space.

    This is a picture of the feature being described.

  5. Paste (Edit > Paste) the copied text in the space you just created.
  6. Add the :hover pseudo-class to the pasted .navigation selector, as follows:

    This is a picture of the feature being described.

  7. In the new .navigation:hover rule, replace the current background-color (#993300) with #D03D03.

    This is a picture of the feature being described.

  8. Save the file and close it.
  9. Open the index.html file in the Document window and preview the page in a browser (File > Preview in Browser).

    When you hold the mouse over any of the links, you can see the new rollover effect.



Getting Started with Dreamweaver
Dreamweaver Basics
Working with Dreamweaver Sites
Laying Out Pages
Adding Content to Pages
Working with Page Code
Preparing to Build Dynamic Sites
Making Pages Dynamic
Developing Applications Rapidly
 
ASPTreeView.com
 
Evaluation has ДєЦ¶ґѕ·expired.
Info...