Computer Tutoring Logo
Est. 2002
Menu Button

Dreamweaver rollover text - Dreamweaver Tutoring Part 9


Changing the colour of rollover text in Dreamweaver

So those hyperlinks are looking just great. You've removed the hideous blue and the terrible underline. But wait a minute! What if you want to change the colour of the hyperlink on hover or mouse over? Well look no further as this tutorial is just for you. Before you get stuck in should you want to download the exercise files you can do so here. You'll then need to set up Dreamweaver to administrate the web site. See creating a website from scratch.

Ensure that the Index page is open.

Click in any of the hyperlinks in the navigation bar.

From the quick tag selector click the a to select the hyperlink

Click on the + next to selectors in the CSS design window.

After the a in the selector window type :hover.

Ensure that the new a:hover tag is below the a tag. If you don't the hover links won't work.

With the new selector selected change the colour of the text to another colour.

Click on #navbar in the selectors

From the padding section add 10px of padding to all 4 sides.

Change the colour of the font to #702122.

File - Save All.

File - Preview in Browser - Google Chrome to test in the browser.
(You can also press F12 on the keyboard to preview).

Using the mouse hover over the hyperlinks in the navigation bar and enjoy your work.

The exercise files you need for this can be found here unzip them to a convenient location.