Question

考虑以下HTML标记：

<img src="info.png" title="Password should contain 6-10 characters">

在输出中，当用户将鼠标悬停在图像上时，会在弹出窗口中显示title属性的值。向用户显示信息是个不错的主意。

但是，当用户点击图片时，这些信息就会消失（请注意用户可能会点击而不是悬停）

我可以做什么（例如使用jQuery）保持信息可见（即使用户点击），只要鼠标指针在图像上？

我尝试了以下方法，但这并没有解决这个问题：

jQuery('img[src="info.png"]').click(function(event){
    event.preventDefault();
        });

编辑： 在jQuery中有没有办法“点击等于悬停”？

Answer 1

您必须创建自己的工具提示。

<img src="info.png" alt="">
<span>Password should contain 6-10 characters</span>

你不需要JavaScript，纯CSS就足够了：

img[src=info.png] + span {
    display: none;
}
img[src=info.png]:hover + span {
    display: inline;
}

修改：如果您不想触摸HTML，可以使用脚本创建工具提示。这是一个jQuery示例：

var img = $("img[src=info.png]");
$("<span>").text(img.attr("title")).insertAfter(img);
img.attr("title", "");

Answer 2

img的{{1}}或title的{{1}}的显示取决于浏览器，您无法控制它。如果您想拥有自己的行为并确保此行为是跨浏览器的，则需要：