jQuery隐藏文本，悬停显示？答案

【问题标题】：jQuery hide text, display on hover?jQuery隐藏文本，悬停显示？
【发布时间】：2012-12-07 11:00:50
【问题描述】：

希望只是一个简单的问题:)

我正在尝试编写小 jQuery 来帮助做到这一点：

页面上显示的文本：CA
鼠标悬停时显示的文本：加利福尼亚

不幸的是，我以错误的方式做到了这一点，我知道我需要使用 .hide() 函数，但我就是不知道如何使用它。抱歉，我对 jQuery 很陌生，只是想了解一下。

这是我制作的一个 jfiddle link，最好是文本从右侧滑入。我尝试过使用跨度，但在不同的 div 中使用 p 标签似乎效果更好。我知道我需要将 HTML 全部放在一行上，以消除 CA 和 LIFORNIA 之间的小空间。有人可以帮忙吗？

HTML：

<div class="state">
     <p>CA</p>
</div>
<div class="state-full">
     <p>LIFORNIA</p>
</div>

CSS：

.state, .state-full {
     display: inline-block;
     cursor: pointer;
}

jQuery:

$('.state').hover(function() {
     $('.state-full').slideToggle(100, 'linear');
     $('.state-full').display(100, 'linear');
});

非常感谢！

【问题讨论】：

标签： jquery hover displayobject

【解决方案1】：

您的代码可以正常工作，您只需要稍微修改您的 HTML 和 CSS 以使其更具语义性。试试这个：

<div class="state">      
    <span>CA</span>
    <span class="state-full">LIFORNIA</span>
</div>

.state, .state-full { cursor: pointer; }
.state-full { display: none; }
.state span { float: left; }

$('.state').hover(function() {
    $('.state-full', this).slideToggle(100, 'linear').display(100, 'linear');
});

请注意，我在选择器中添加了一个上下文，因为我假设您将在页面上拥有多个上下文。

Example fiddle

【讨论】：

非常感谢大家，非常感谢。他们都工作得很好，但我最后还是选择了@Rory 的答案，因为这意味着我可以做多个“状态”div，而不必一遍又一遍地重复 jquery。我相信它们都会派上用场！ :)

【解决方案2】：

试试这个：

<script type="text/javascript">
    $(document).ready(function () {
        $('.state').mouseenter(function () {
            $(this).html("CALIFORNIA");
        });
        $('.state').mouseleave(function () {
            $(this).html("CA");
        });
    });
</script>

希望对你有帮助:)

【讨论】：