カーソルを画像の上に置くとテキストが表示されます

Question

カーソルを置いたときに画像の下にテキストを表示しようとしています。私はtitle属性を使用したくありません。なぜなら、私はそのスタイルにテキストを付けたいからです。例えば、Dribbbleである。画像の一部にカーソルを合わせると、画像PROが画像を投稿した人物の名前の横に表示されます。

Answer 1

このクイック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(); 
}); 

これは、あなたが探して何をどのように達成するかのアイデアを与える必要があります。明らかに改善することができました。それが役に立てば幸い。

Answer 2

div内にテキストを入力して、このような画像の上にdivを表示します。

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

Answer 3

引数を指定して関数をイメージのホバリング時に表示するテキストとして定義します。その関数では、divを動的に作成し、そのdiv内にテキストを配置し、マウスポインタの位置に応じてdivを動的に配置します。divにはCSSを追加することもできます。イメージのマウスオーバー時にこの関数を呼び出します。 これがあなたを助けてくれることを願っています。

Answer 4

jqueryのツールチップを使用する必要があると思います。以下は、あなたが最高のツールチッププラグインを見つけることができる場所からのリンクです。

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

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

Answer 5

$(function() { 

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

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

}); 

Answer 6

多分私が思うに、このhttp://jsfiddle.net/konglie/SXFEn/