问题描述
我有一个按钮,当悬停时,显示一个< span>
,否则隐藏。我想弄清楚的是如何转换按钮的扩展:hover
,所以它更加平滑。我尝试使用CSS3过渡,但不能完全弄清楚。加上我不知道这是否最好的解决方案。
I have a button that, when hovered over, shows a <span>
that is otherwise hidden. What I'm trying to figure out is how to transition the button's expansion on :hover
so it's more smooth. I tried using CSS3 transitions but couldn't quite get it down. Plus I don't know if that's the best solution anyway.
编辑:我添加了一些jQuery,但必须有错误。这里是我使用的脚本,在这里读取以前的答案(如果我可以找到它,我会引用):
I added some jQuery but must have something wrong. Here's the script I used, after reading a previous answer here (which I'll reference if I can find it again):
$('a:has(span)').hover(
function() { $('span', this).fadeIn(); },
function() { $('span', this).fadeOut(); },
);
我创建了一个小提琴:。
I've created a Fiddle: http://jsfiddle.net/UYexr/. Can anyone help me out?
推荐答案
如果我是你,我会避免使用CSS3只是因为它缺乏支持;因为我可能会坚持JS动画。
If I were you I would avoid using CSS3 simply because of its lack of support; given that I would probably stick to JS animation.
我会看到这样做的最好的方法是使跨度有 display:inline-块;
具有定义的宽度。然后,您可以使用javascript动画库为span的显示设置动画。
The best way I would see to do this is to make the span have display:inline-block;
with a defined width. Then you can use a javascript animation library to animate the span's display.
就我个人而言,我会使用jQuery的。虽然有充足的js动画库...
Personally, I would go about using jQuery's animate method. Although there are plenty of js animation libraries...
这篇关于为按钮创建平滑过渡,在悬停时显示隐藏的跨度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!