Question

我在页面上并排有3个图标。我想要的是当用户将鼠标悬停在图标上时，一个小文本跨度向左滑动。

这样（没有悬停）： [IMG]

悬停（文字滑出）：某些文字[IMG]

我正在为每个图标使用此代码：

<div class="cgs"><span class="cgstext">1. Connect</span><a href="#"><img src="images/cgs/connect70h.png" width="69" height="70" alt="Connect"></a></div>

如果图标在左侧，文本在右侧，我只需使用jQuery动画扩展外部div ...但我不确定该怎么做才能使左侧的跨度滑出到剩下。我希望它优雅地滑出，如果它在两个图标之间，那么空间可以优雅地展开（如果可能的话，优雅地悬停）。

感谢任何帮助！

Answer 1

这应该足以让你到达那里。我不得不改变你的html，css，并添加一些js。不要使用跨度，因为您无法在其上设置宽度。从而使animate无用。相反，我把它设为inline-block。然后，您可以正确地为其设置动画。剩下的只是javascript，听起来你知道怎么回事。

将鼠标悬停在图片上。

http://jsfiddle.net/Mx2JS/3

<div class="cgs">
    <div class="cgstext">1. Connect</div>
    <a href="#"><img src="http://placehold.it/69x70" width="69" height="70" alt="Connect"></a>
    <a href="#"><img src="http://placehold.it/69x70" width="69" height="70" alt="Connect"></a>
    <a href="#"><img src="http://placehold.it/69x70" width="69" height="70" alt="Connect"></a>
</div>


$('a').hover( function() {
    $('div.cgstext').animate( { width:100 }, 500);
}, function() {
    $('div.cgstext').animate( { width:0 }, 500);
});

使用jquery将文本向左滑出

1 个答案: