在图像悬停上显示文本

Question

I'm trying to have an image description shown when hovering over the image which is placed in a div ( #web01 ).

I've been toying with the mouseenter / mouseleave and have been able to get text shown but when I link it to a div it doesn't seem to work.

It's probably dead easy but i can't see what I'm doing wrong.

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

Answer 1

I think you need something like this:

http://jqueryui.com/tooltip/

Answer 2

Assuming you meant to name your element title1 and not titel1 (spelled incorrectly), simply changing the id to title1 fixes the problem. I've given a working example below.

Working Example

Answer 3

<div id="web01" title="myTitle">...</div>或<img src="..." title="myTitle"/>将显示本机浏览器标题（工具提示）。

Answer 4

In the example on http://api.jquery.com/mouseenter/ I saw them use this in the function.

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

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