Question

当鼠标移过图像时，如何在图像上显示文字。

例如，您在youtube上看到缩略图上有一个添加到播放列表按钮。我怎么能设置类似的东西，但是类似按钮。

我不是在寻找工具提示。当鼠标悬停在图像上时，我希望文本显示在图像上。

Answer 1

将您的每张图片放在一个单独的“容器”div中。这些div应该具有位置：relative属性。给所有图像命名为'singleImage'将这个“容器”div中的另一个div放在其中，其中position：absolute和display none。将这些div的类名设置为“toolTip”。这个div将是工具提示。在图像上添加title属性。如果你喜欢冒险，你将需要jQuery来装配悬停或简单的javascript

在jQuery中你会做类似的事情：

$('.singleImage').mouseover(function(){
    var tt = $(this).parent().find('.toolTip');
    tt.html($(this).attr('title'));
    tt.show();
});
$('.singleImage').mouseout(function(){
    var tt = $(this).parent().find('.toolTip');
    tt.hide();
});

Answer 2

您正在寻找tipsy我认为

Answer 3

您所指的功能称为“工具提示”。有很多不同的插件在那里可以使用。没有特定的代码，任何人都很难提出量身定制的解决方案。

像youtube一样的图像鼠标悬停上的文字

3 个答案: