javascript - 画像ホバーにテキストを表示

Question

div ( ) に配置された画像にカーソルを合わせると、画像の説明が表示されるようにしようとしてい#web01ます。

私はmouseenter/mouseleaveをいじっていて、テキストを表示することができましたが、それを div にリンクするとうまくいかないようです。

おそらく簡単ですが、何が間違っているのかわかりません。

$(document).ready(function () {
    $("#web01").mouseenter(function () {
        $("#titel").html('<p class="titel">description</p>');
    });
    $("#web01").mouseleave(function () {
        $("#titel").html('<p class="titel"></p>');
    });
})

Answer 1

次のようなものが必要だと思います：

http://jqueryui.com/tooltip/

Answer 2

要素に名前を付けるつもりで (スペルが間違っている) と仮定するとtitle1、titel1id を変更するだけtitle1で問題が解決します。以下に実際の例を示しました。

実施例

Answer 3

<div id="web01" title="myTitle">...</div>または<img src="..." title="myTitle"/>、ネイティブ ブラウザーのタイトル (ツールヒント) が表示されます。

Answer 4

http://api.jquery.com/mouseenter/の例では、関数でこれを使用しているのを見ました。

$(document).ready(function(){
 $("#web01").mouseenter(function(){
  $("#titel",this).html('description'); 
 });

 $("#web01").mouseleave(function() { 
  $("#titel",this).html(''); 
 });
});