如何在悬停时更改列表项内的文本答案

【问题标题】：How to change the text inside a list item on hover如何在悬停时更改列表项内的文本
【发布时间】：2014-07-27 17:12:56
【问题描述】：

所以我有一个包含主页、商店、论坛和应用程序/应用程序的列表。在该列表上，我希望显示应用程序，但是当您将鼠标悬停在列表项上时，它会更改为应用程序一词。我希望它可以更改列表项内的任何位置，而不仅仅是在文本悬停上。所以我希望能够将鼠标悬停在列表区域的任何位置，而不仅仅是在单词上进行更改。如果有人知道如何做到这一点，那就太棒了。我只需要代码，让您告诉我将其放在代码中的哪个位置以及需要将名称更改为什么。谢谢。

这是列表项的 html

<a href="#">
<li class="item drop"><a href="#">Apps</a>

【问题讨论】：

I need code, you tell me where to put it....这不是这里的工作方式。您应该提供显示 html 结构和您尝试过的代码的代码
我们想提供帮助，但我们不能。根本没有足够的信息让我们这样做。这就像我请你帮忙粉刷我的房子，但我拒绝告诉你我的房子在哪里。

标签： javascript jquery html css

【解决方案1】：

我打赌你想要这样的东西：

<ul class="list">
    <li>Home</li>
    <li>Shop</li>
    <li>Forum</li>
    <li class="container"><span class="full">Applications</span><span class="small">Apps</span></li>
</ul>

应用程序和应用程序在同一位置，在列表的悬停状态时发生变化。

.container{
    position:relative;
}
.full, .small{
    position:absolute;    
}
.full{
    opacity:0;
}
.list:hover .full{
    opacity:1;
}
.list:hover .small{
    opacity:0;
}

没有 javascript ;)

http://jsfiddle.net/sagix/wJsGn/

【讨论】：

我用我正在使用的 html 编辑了这篇文章，我不知道如何将它包裹在我所拥有的东西上。
添加类似的内容：<li class="container"><a href="#"><span class="full">Applications</span><span class="small">Apps</span></a></li>