View comments | RSS feed

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.

ABOUT...

 

About the :hover pseudo-class A pseudo-class is a means of affecting certain elements in an HTML document, based not on the HTML code of the document itself, but on other external conditions applied by the web browser. Pseudo-classes can be dynamic, in the sense that an element on the page may acquire or lose the pseudo-class while a user interacts with the document.

The :hover pseudo-class affects a change in a formatted page element when the user holds the mouse over the element. For example, when the :hover pseudo-class is added to the .navigation class style (.navigation:hover) to create a new rule, all text elements that the .navigation rule formats change according to the .navigation:hover rule's properties.
  1. Open the cafe_townsend.css file.
  2. Select the entire .navigation rule.



  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.



  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:



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



  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.

Comments


No screen name said on Oct 17, 2005 at 11:35 AM :
I have been following the (excellent) tutorial.

Everything was fine until I tried to add a rollover affect to the menu items
on index.html using the .naviagation:hover css entries in
cafe_townsend.css.

(I am using a Mac with Safari on Mac OS X 10.4 tiger)

As far as I can see the effect doesn't work. It does work on the menu.html
using the menu.css that is provided. So I checked the completed files
and found that it doesnt work on the completed index.html but does work
on the menu.html there as well.

I have tried copying the code from the menu.css to the
cafe_townsend.css and that doesn't seem to work either...

Would appreciate knowing what I need to do to make the rollover effect
work as it is rather neat - at the moment it looks as though it only works
on child pages...

Look forward to hearing from you.

Regards

Simon
No screen name said on Oct 19, 2005 at 2:22 PM :
Hello there, this is just an awesome tutorial I wish I did this before with other softwares I used.
Simon I was just having the same problem about the rollover effect, but I got it fixed as soon as I removed the space between hover and .navigation
Not working: .navigation: hover
Working: .navigation:hover
Hope this helps. Take care.
No screen name said on Nov 1, 2005 at 7:05 AM :
Variation on same problem: successfully added .navigation:hover to
cafe_townsend.css. .navigation.hover effect works as expected when
previewing index.html in explorer. doesn't work when previewing in safari.
hmm... (great tutorials, btw.)
crystalattice said on Dec 5, 2005 at 10:48 PM :
Apparently the fix for Safari hasn't been made yet, either by a Safari update from Apple or by Adobe/Macromedia. It does work under Opera, so I don't know what the problem is.
Mike Perciballi said on Dec 26, 2005 at 9:43 PM :
Hi all, I found the same thing with the :hover. So I looked at the code for
the menu.css file. If you look at the link you inserted you will see the
rollover effect works. I copied the the code and them modify it.

Example: .navigation{
font-family: Verdana, sans-serif;
font-size: 16px;
font-weight: bold;
text-decoration: none;
background-color: #993300;
display: block;
padding: 8px;
width: 140px;
}
Then add the rollover: .navigation{
font-family: Verdana, sans-serif;
font-size: 16px;
font-weight: bold;
text-decoration: none;
background-color: ##D03D03;
display: block;
padding: 8px;
width: 140px;
}
Looks good, right? Well this did not work for me. So I went the the
menu.css and found the background-color was at the bottom of the code.
This is what my new code looks like: .navigation:hover {
font-family: Verdana, sans-serif;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
display: block;
padding: 8px;
width: 140px;
background-color: #D03D03;
}
and yes I'm using Safari too. Let me know if this works for you.
Roaring mouse said on Jan 6, 2006 at 8:14 AM :
When using Fireworks and exporting your pull down menu do not save
the css format and your pull down will work

Jim
No screen name said on Jan 7, 2006 at 3:40 PM :
I had little trouble completing this tutorial. What I would like to do now is remove the line underneath the text. How do I do this?
Carlos Miguel Hoover said on Jan 7, 2006 at 11:34 PM :
I have the same roll-over problem in Safari, but in IE for Mac there is no
problem. It's unfortunate as most of my clients use Macs and, undoubtably,
use Safari. Is this an issue for Apple to solve or for Macromedia?
Carlos Miguel Hoover said on Jan 8, 2006 at 12:10 AM :
I had a problem with my rollover effect in Safari, not unlike what other
people have described. When I centered the entire page (as is optional in
the next page), my rollover effect problem disappeared.
Carlos Miguel Hoover said on Jan 10, 2006 at 10:39 PM :
I think what you've got to do to make the rollover effect work in Safari is
refresh the page. I'm not sure, but I'll know for sure when I go through the
tutorial again. Can it be so simple?
Daniel490 said on Jan 19, 2006 at 8:03 PM :
The previous entry seems to have given the right answer: A refresh of the
page in Safari is needed for the rollover effect to be seen.

To recap: Tutorial works as expected in Safari (I'm using version 2.0.3) until
the :hover pseudo-class is added. When you preview in Safari, it does not
show the rollover effect. Solution: refresh the page in Safari, and it should
work going forward.
No screen name said on Feb 27, 2006 at 11:59 AM :
How's this for simple... I used the letter "O" instead of the number "0"
when entering the rollover colour.... once the O's were changed to
zeros, the rollover worked fine....
Pam_i_am said on Apr 28, 2006 at 1:28 PM :
Don't forget to have the # prefixing the color definitions - this was my error.
SteveRI said on Aug 2, 2006 at 12:20 PM :
I ran into the same problem using IE 6.0 on a Windows XP machine. I just couldn't get the roll over effect to work. I putted around in the CSS panel and selected the navigation:hover rule, then the navigation rules. When I double-clicked each one in the CSS panel, the "CSS Rule Definition" window popped up. I didn't change anything - just accepted the values for each rule and closed the CSS Rule Definition window. BUT - After that, the rollover effect worked! I don't know why - but perhaps it will work on your PC too.
No screen name said on Aug 7, 2006 at 4:43 PM :
Just add the # prefixing the values in the color definition, and you should be okay!
No screen name said on Aug 12, 2006 at 9:59 PM :
Fortunately, I had no problem with anything in this tutorial (except for the doubling of the image files et al) until the very end ----- where is the "contact_us.cfm" file that is supposed to be the hyper-link for the Contact Us in the Navigation Bar?
No screen name said on Oct 30, 2006 at 12:59 PM :
If you are having trouble seeing the rollover in Safari just try refreshing the browser.
No screen name said on Feb 5, 2007 at 5:34 AM :
This tutorial is clear and I had no problem doing it in Firefox with Windows XP. What is NOT clear is what's happening at the code level. Why is the first .navigation paragraph left there as-is rather than edited to insert the :hover statement? Are both paragraphs being processed?
Larry M Ray said on May 7, 2007 at 7:31 PM :
Also must say, excellent tutorial, and I have added Camino to the browsers list for previewing (as that is what I use as my default browser), and the entire tutorial works perfectly including rollovers. Thanks, Larry
Bring it on Baby said on May 20, 2007 at 2:48 PM :
Lots to do and remember. I have bee spoiled with the use of Homesteads sitebuilder. In the learning curve to this point I would already have been building my own site. Their tools have "modulized" this process significantly. I am hopeing this area of Macromedia improves for by the time I get the handle on it senility may set in. Just kidding... I like being able to work a little faster and I may be judging too quickly. I apoligize to all. SValencia

 

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/dreamweaver/8/using/gs_06_13.htm