鼠標懸停在效果褪色的縮略圖

this is the screenshot for what I'm trying to achieve 因此，爲畫廊的標記是：鼠標懸停在效果褪色的縮略圖

<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標籤，然後當用戶鼠標移動到圖片使用淡入淡出效果來顯示標題，如工具提示，但位於圖像的頂部（如截圖中所示）。但我不知道如果我可以操縱標題標籤出現像我說的... 請給我一些提示如何實現這一點，因爲我沒有非常清楚我腦海中哪種方法是合適的.. 謝謝！

來源

2011-11-15 agis

我不fiind任何聯繫，也沒有做我找到截圖..請更新問題 –

沒有違法意圖，但我認爲你錯過了點stackoverflow。我們在這裏幫助解決代碼中的麻煩 - 不是爲了讓您的代碼爲您服務！ –

的截圖？ –

好的，這裏是我爲你寫的代碼，隨時改進它。這與第一個答案完全相同。

<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：前置標籤是錯誤這裏對不起;）

來源

2011-11-15 15:17:36 iRyusa

不適合我，我試圖把你的JavaScript代碼，什麼也沒有發生......我沒有看到任何「顯示：塊;」或類似的東西在JavaScript代碼... – agis

我把你的JavaScript代碼在我的標記是這樣的：$（document）.ready（function（）{--- your code ---}）;它不起作用 – agis

在js小提琴上一切看起來不錯，你添加數據標題你的IMG？順便說一句：「.fadeIn（'slow'）;」將做「.show（）;」除了它會增加一點淡入淡出效果。看看jsffidle PLZ :) – iRyusa

「給我請一些提示如何實現。」

這裏是我的提示：做一個跨度內jTscrollerContainer與ID，您說的「工具提示」，用CSS屬性顯示：無; 。然後當鼠標懸停在圖像上時（jQuery（..）。hover（）），獲取圖像的位置.position（）和圖像標題.attr（'title'）。重寫#tooltip css，使跨度可見（顯示：塊），改變位置（頂部，左邊，它需要與位置：絕對/相對這個），並改變它的文本.text（image.title）。希望這是你想找的

來源

2011-11-15 15:10:06 kamil

未經測試，但是從我的頭頂 - 如果你添加標題標籤圖像：

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

然後，只需風格各一上來就被定位絕對，相對一個標籤。

來源

2011-11-15 15:12:25

鼠標懸停在效果褪色的縮略圖

回答

相關問題