jQuery隐藏文本，显示悬停?

Hopefully just a quick question :)

希望只是一个简短的问题

I'm trying to write little jQuery that will help do this:

我试着写一些小jQuery来帮助实现这一点:

text displayed on page: CA
显示在页面上的文字:CA
text displayed when mouse hovers: CALIFORNIA
鼠标悬停时显示文本:CALIFORNIA

I've managed to do this the wrong way round unfortunately, I know I need to use the .hide() function but I just can't figure out how to use it. Sorry I'm pretty new to jQuery and just trying to get my head round it.

不幸的是，我使用了错误的方法，我知道我需要使用.hide()函数，但是我不知道如何使用它。抱歉，我对jQuery很陌生，只是想让我的头脑清醒一下。

Here's a jfiddle I made link, preferably the text would slide in from the right. I've tried using a span but it seemed to work better having p tags in different divs. I understand that I'll need to put the HTML all on one line to get rid of the little space between CA and LIFORNIA. could anyone possibly please assist?

这是我做的一个jfiddle，最好是从右边滑动过来。我尝试过使用span，但是在不同的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');
});

Many thanks!

很多谢谢!

2 个解决方案

#1

The code you had would work fine, you just need to modify your HTML and CSS a little to make it more semantic. Try this:

您拥有的代码可以正常工作，您只需稍微修改一下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');
});

Note that I added a context to the selector as I assume you're going to have more than one of these on the page.

注意，我在选择器中添加了一个上下文，因为我假定您将在页面上有多个这样的内容。

Example fiddle

例如小提琴

#2

Try this:

试试这个:

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

Hope it helps :)

希望它能帮助:)

#1