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而不是titel1（拼写错误），只需更改 id 即可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(''); 
 });
});