jQuery隐藏文字,悬停时显示?

时间:2012-12-07 11:00:50

标签: jquery hover displayobject

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

我正在尝试编写一些有助于实现此目的的jQuery:

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

我设法以错误的方式做到这一点不幸的是,我知道我需要使用.hide()函数,但我无法弄清楚如何使用它。对不起,我对jQuery很新,只是试着让我的头脑。

这是我制作的link,最好是文字从右边滑入。我尝试过使用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');
});

非常感谢!

2 个答案:

答案 0 :(得分:7)

您拥有的代码可以正常工作,您只需稍微修改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

答案 1 :(得分:3)

试试这个:

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

希望有所帮助:)