Question

所以我有一个包含Home，Shop，Forums和Apps / Applications的列表。在该列表中，我希望显示应用程序，但是当您将鼠标悬停在列表项上时，将其更改为“应用程序”一词。我希望它能够更改列表项中的任何位置，而不仅仅是文本悬停。因此，我希望能够将鼠标悬停在列表区域的任何位置，而不仅仅是在单词上进行更改。如果有人知道如何做到这一点，那将是非常棒的。我只需要代码，并告诉我我将把它放在我的代码中以及我需要将名称更改为。谢谢。

这是我对列表项的html

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

Answer 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/

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

1 个答案: