jquery - 缩略图的鼠标悬停和淡入淡出效果

Question

因此，画廊的标记是:

<div class="jTscrollerContainer">
    <div class="jTscroller">
        <a href="#"><img src="thumbs/img1.jpg" /></a>
        <a href="#"><img src="thumbs/img2.jpg" /></a>
        <a href="#"><img src="thumbs/img3.jpg" /></a>
        <a href="#"><img src="thumbs/img4.jpg" /></a>
        <a href="#"><img src="thumbs/img5.jpg" /></a>
    </div>
</div>

我正在考虑向 img 标签添加一个标题，然后当用户将鼠标悬停在图像上时，标题会出现淡入淡出效果，类似于工具提示，但位于图像顶部(如屏幕截图所示) .但是我不确定我是否可以像我说的那样操纵标题标签...... 请给我一些如何实现这一目标的提示，因为我不太清楚哪种方法适合..谢谢!

Answer 1

好的，这是我为您编写的代码，请随时改进它。这与第一个答案完全一样。

 <div class="jTscrollerContainer">
     <div class="jTscroller">
         <span id="tt" style="display:none;"></span>
         <a href="#"><img src="thumbs/img1.jpg" data-title="title" /></a>
         <a href="#"><img src="thumbs/img2.jpg" data-title="title" /></a>
         <a href="#"><img src="thumbs/img3.jpg" data-title="title" /></a>
         <a href="#"><img src="thumbs/img4.jpg" data-title="title" /></a>
         <a href="#"><img src="thumbs/img5.jpg" data-title="title" /></a>
     </div>
 </div>

这是javascript

 var link = $('.jTscroller a');

 link.bind('mouseenter', function(){
     var tag = $('#tt');

     tag.html($(this).find('img').data('title'));


     $('#tt').fadeIn('slow');
 });

 link.bind('mouseleave', function(){
     $('#tt').fadeOut('slow');
 });

更新:fiddle http://jsfiddle.net/nVKyL/

更新 2:prepend 标签在这里是一个错误抱歉;)