在图像悬停上显示文本

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而不是titel1（拼写错误），只需将ID更改为title1即可解决问题。我在下面给出了一个有效的例子。

Working Example

Answer 3

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

Answer 4

在http://api.jquery.com/mouseenter/上的示例中，我看到他们在函数中使用 this 。

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

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