如何使用悬停动作为 wordpress 编写导航代码答案

【问题标题】：How do I code a navigation for wordpress with hover actions如何使用悬停动作为 wordpress 编写导航代码
【发布时间】：2013-05-23 15:57:08
【问题描述】：

...拉取 Span A 的页面标题的第一个字母和 Span B 的整个标题（悬停结果）。我在这里有 html 和 CSS 版本http://codepen.io/CrabSmith2400/full/Kolje。我花了几个小时阅读 WordPress 标签列表并尝试我在 Google 上阅读的内容，现在已经有几周了。我觉得这可能是一个非常简单的答案，但我很环保，这是我的第一个项目，我正在从头开始构建它。任何建议或正确方向的观点都会让我永远欠你的债。

谢谢！

【问题讨论】：

标签： php navigation wordpress-theming

【解决方案1】：

假设你有这个 HTM：

<div>
    <span>T</span>
    <span>Test</span>
</div>

然后使用这个 CSS：

div, span{
    display:block;
    width:300px;
    height:100px;
    line-height:100px;
    text-align:center;
    background:grey;
}

div{
    position:relative;
}

span{
    position:absolute;
    top:0;
    left:0;
    display:none;
}

div span:first-child{
    display:block;
}

div:hover span{
    display:block;
}

div:hover span:first-child{
    display:none;
}

在此处查看工作示例：http://jsfiddle.net/Mm4AL/

【讨论】：

谢谢。我有它，所以它可以在我的模型上运行，但是我如何编码 index.php / header.php 标签，以便在 wordpress 中，当您在 WP 仪表板中创建新页面时，导航菜单将随之更改。
假设您想通过仪表板将“P”照片页面的名称更改为“C”电影院，WordPress 将不得不为 span A 提取第一个字符，为 span B 提取整个单词。
结合使用substr() (PHP) 和the_title() (WordPress)
如果这是您正在寻找的答案，请点赞并接受。谢谢。 :)
我该怎么做？大声笑，我是个超级菜鸟！