當光標懸停在圖像上時顯示文本

當您將鼠標懸停在圖像上時，我正試圖完成在圖像下方顯示文本的任務。我不想使用title屬性，因爲我想能夠對文本進行樣式設置。當光標懸停在圖像上時顯示文本

一個例子將在Dribbble。當你將鼠標懸停在一些圖片，文字PRO旁邊張貼的圖片

來源

2011-08-24 shnisaka

我想，你想添加工具提示嗎？ – AlphaMale

嗯。不......我正在嘗試創建遊戲封面，並且當您將鼠標放在它們上面時...遊戲名稱出現在圖像 – shnisaka

的中間，如下所示：http://dribbble.com/ – shnisaka

看看這個快速JS FIDDLE。

你的HTML

<ul> 
    <li> 
     <div class="caption">this is my caption</div> 
     <img src='http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367'/> 
    </li> 
    <li> 
     <div class="caption">this is my caption</div> 
     <img src='http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367'/> 
    </li> 
    <li> 
     <div class="caption">this is my caption</div> 
     <img src='http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367'/> 
    </li> 
    <li> 
     <div class="caption"><span>this is my caption</span></div> 
     <img src='http://dribbble.com/system/users/22122/screenshots/244072/empirestate02_d_teaser.png?1314126367'/> 
    </li> 
</ul>

的CSS

ul li{ float:left; padding:20px; border:solid gray 4px; margin:5px;} 
ul li div{display:none; background:white; opacity:.5; position:absolute;}

而JavaScript

$('ul li').mouseenter(function(){ 
    var image= $(this).find('img'), 
     caption = $(this).find('div'); 

    caption.width(image.width()); 
    caption.height(image.height()); 
    caption.fadeIn(); 
}).mouseleave(function(){ 
    var image= $(this).find('img'), 
     caption = $(this).find('div'); 

    caption.width(image.width()); 
    caption.height(image.height()); 
    caption.fadeOut(); 
});

這應該給你如何實現你想找的想法。它顯然可以改進。希望能幫助到你。

來源

2011-08-24 05:38:09

給你的文字一個div內，然後顯示在這樣的形象的懸停該分區的人的名字顯示出來..

<div id="div">Hiiii</div> 
$('#img').live('mouseover', function(){ 
$('#div').show(); 
});

來源

2011-08-24 05:22:55 Vivek

定義的說法，只要你想顯示在盤旋的圖像文本的功能。然後在該函數中，您動態創建一個div並將該文本放置在該div內，並根據鼠標指針位置動態定位div，並且還可以爲div賦予css樣式效果。在圖像的鼠標懸停上調用此函數。希望這可以幫助你。

來源

2011-08-24 05:24:25 AmGates

我認爲你必須使用jQuery工具提示。下面是從哪裏可以找到最好的工具提示插件的鏈接。

http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

http://slodive.com/web-development/best-jquery-tooltip-plugins/

來源

2011-08-24 05:25:57 munjal

$(function() { 

    $('.bar').css({opacity:0}); 

    $('.foo').hover(function() { 
     $('.bar').stop().animate({ 
      opacity: 1 
     },'fast'); 
    },function() { 
     $('.bar').stop().animate({ 
      opacity: 0 
     },'fast'); 
    }); 

});

來源

2011-08-24 05:29:18 daryl

也許是這樣http://jsfiddle.net/konglie/SXFEn/

來源

2011-08-24 05:38:23 Lee

當光標懸停在圖像上時顯示文本

回答

相關問題