0

我在一个页面上并排有 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 animate 来扩展外部 div ......但我不确定如何使左侧的跨度滑到左侧。我希望它优雅地滑出，如果它在 2 个图标之间，则空间可以优雅地扩展（并在悬停时优雅地收缩）。

任何帮助表示赞赏！

4

1 回答 1

2

这应该足以让你到达那里。我不得不更改您的 html、css 并添加一些 js。不要使用跨度，因为您无法在其上设置宽度。从而使animate无用。相反，我将其设置为 div 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);
});
于 2013-01-24T21:34:25.507 回答