Мышь и эффект исчезают для миниатюры

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

Хорошо, вот код, который я пишу для вас, не стесняйтесь его улучшать.Это похоже на 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');
 });

Обновление: скрипка http://jsfiddle.net/nVKyL/

Обновление 2: тег prepend здесь является ошибкойизвините;)

Answer 2

«Дайте мне, пожалуйста, несколько советов, как достичь ..»

Вот мой совет: создайте span внутри jTscrollerContainer с идентификатором, скажем, «подсказка», с отображением атрибута css: нет; , Затем, когда мышь находится над изображением (jQuery (..). Hover ()), получите позицию .position () и заголовок изображения .attr ('title') изображения. Перепишите #tooltip css, сделайте видимый промежуток (display: block), измените положение (сверху, слева, для этого должно быть положение: абсолютное / относительное) и измените его текст на .text (image.title). Надеюсь, это то, что вы ищете

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

Затем просто стилизовать каждую из них до абсолютного положения относительно тега.