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

前端之家收集整理的这篇文章主要介绍了jQuery隐藏文字,悬停时显示?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

希望只是一个快速的问题:)

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

>页面显示文字:CA
>鼠标悬停时显示文字:CALIFORNIA

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

这是我制作link的jfiddle,最好是文本从右边滑入.我尝试过使用span但是在不同的div中使用p标签似乎更好.据我所知,我需要将HTML全部放在一行,以摆脱CA和LIFORNIA之间的小空间.有人可能请你帮忙吗?

HTML:

CSS:

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

jQuery的:

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

非常感谢!

最佳答案
您拥有的代码可以正常工作,您只需稍微修改HTML和CSS以使其更具语义.试试这个:

.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

原文链接:https://www.f2er.com/jquery/428655.html

猜你在找的jQuery相关文章