在悬停时更改导航文本而不是更改回原始文本答案

【问题标题】：Change nav text on hover than change back to original text在悬停时更改导航文本而不是更改回原始文本
【发布时间】：2013-03-08 15:35:55
【问题描述】：

我正在使用 cufon，我正在尝试弄清楚如何更改 hover/mouse over 上的导航文本，然后在 mouse out/hover off 上更改回原始文本。现在，当我将鼠标悬停在我希望文本更改的导航选项卡上时，它会更改但不会更改回原始文本、颜色或字体。

这是我的小提琴的链接：http://jsfiddle.net/jsavage/4fPw6/

当用户悬停或鼠标悬停时，基本上我需要导航中的“下降”更改为“即将推出”，当用户悬停或鼠标移出时，文本将变回“下降”

任何帮助将不胜感激！非常感谢大家！

【问题讨论】：

您的 jsFiddle 存在许多问题。 1. 你没有选择 jQuery 作为框架（左上角）。 2. 您在 JavaScript 面板中包含了<script> 标签（这是无效的）。 3. 您正在尝试使用相对 URL 加载服务器本地的 JS 文件（这不起作用）。
我已经更新了您的 jsFiddle 以尽我所能纠正上述问题 - jsfiddle.net/4fPw6/1 - 现在它似乎可以按您的意愿工作；您实际页面上的问题可能与 cufon 有关。
我还更新了你的小提琴，但我还修复了一些其他问题。 1) 将所有链接组合成一个定义。 2) 使用 line-height 设置按钮的高度。 3）将宽度应用于内部锚标记。 4）将jquery悬停应用于锚点，因此悬停时链接不会消失。在这里查看：jsfiddle.net/4fPw6/4
感谢大家的帮助...这正是我想要做的！非常感谢您的帮助！

标签： jquery cufon

【解决方案1】：

首先，您的脚本标签应该在 HTML 中，并且您需要包含 JQuery 以使用其功能。

您还修改了 .fall 的文本，它是一个 li 元素，不包含任何文本。您必须定位其中包含要修改的文本的 <a> 标记。

这里是the fiddle

【讨论】：

【解决方案2】：

有一种方法可以使用CSS only（虽然有点老套）：

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

【讨论】：