Change nav text on hover than change back to original text

Question

I am using cufon and I am trying to figure out how to change navigation text on hover/mouse over then change back to the original text on mouse out/hover off. Right now when I hover over the nav tab that I want the text change it does but it doesn't change back to the original text, color or font.

Here is a link to my fiddle: http://jsfiddle.net/jsavage/4fPw6/

Basically I need "fall" in the nav to change to "coming soon" when the user hovers over or mouse over and when the user hovers off or mouse outs the text will change back to "fall"

Any help would be greatly appreciated! Thanks so much guys!

Answer 1

First of all, your script tags should be in the HTML and you need to include JQuery to make use of its functions.

Also you were modifying the text of .fall which is an li element and doesn't contain any text. You have to target the <a> tag inside it that contains the text you want to modify.

Here's the fiddle

Answer 2

There is a way using CSS only (bit hacky though):

.fall:hover:before {
    content: 'coming soon';
    font-size: 0.875em;
    color: #fff;
    text-transform:uppercase;
}
.fall:hover a {
    display: none;
}