单击后如何保持标题属性值可见？

Question

考虑下面的HTML标记：

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

在输出中，当用户在图像上悬停时，显示在弹出式标题属性的值。向用户显示信息是一个不错的主意。

但是，当用户单击图像（请注意，用户可能倾向于点击，而不是徘徊）此信息消失

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

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

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

编辑： 有没有办法做到“点击等于徘徊” jQuery的？

Answer 1

img的显示屏title s或a的显示屏link s依赖于浏览器，您无法控制它。如果你想拥有自己的行为，并确保这种行为是跨浏览器，你将需要：

1. 通过删除所有title和 alt属性
2. 重新实现自己的工具提示摆脱默认浏览器行为利用现有的许多 库

好运

Answer 2

你必须创建自己的提示之一。

<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", "");