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

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

“请给我一些提示如何实现......”

这是我的提示：在jTscrollerContainer中创建一个带有id的span，让我们说“tooltip”，css属性display：none; 。然后当鼠标悬停在图像上时（jQuery（..）。hover（）），获取图像的位置.position（）和图像标题.attr（'title'）。重写#tooltip css，使span可见（显示：块），更改位置（顶部，左侧，它需要与位置：绝对/相对于此）并使用.text（image.title）更改它的文本。希望这就是你要找的东西

Answer 2

好的，这就是我为你写的代码，随时改进它。这和第一个答案完全一样。

 <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');
 });

更新：小提琴http://jsfiddle.net/nVKyL/

更新2：prepend tag在这里是一个错误抱歉;）

Answer 3

未经测试但不在我的头顶 - 如果您为图片添加标题标记：

    $("a").hover(function(){ 
         var thisTitle = $(this.find("img").attr("title") 
         $("<p class='tooltip' />").appendTo($(this)).hide().html(thisTitle).fadeIn(1000);
    }, function(){
          $(".tooltip").fadeOut(1000, function(){
               $(this).remove();
        });
});

然后将每个样式设置为相对于a标签绝对定位。