jQuery 隐藏文本，悬停时显示？

Question

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

我正在尝试编写一些 jQuery 来帮助实现这一点:

• 页面上显示的文本:CA
• 鼠标悬停时显示的文本:CALIFORNIA

不幸的是，我设法以错误的方式做到了这一点，我知道我需要使用 .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');
});

非常感谢!

Answer 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