点击后如何保持标题属性值可见？ [英] How to keep the title attribute value visable after clicking?

问题描述

请考虑以下HTML标记：

 < img src =info.pngtitle =密码应该包含6 -10个字符> 
  

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

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

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

我尝试了以下方法，但这并未解决此问题：

  jQuery（'img [src =info.png]'）。click（function（event）{
 event.preventDefault（）; 
}）; 
  

编辑：
有没有办法 em>点击就等于在jQuery中悬停

解决方案

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

 < img src =info.pngalt => 
< span>密码应包含6-10个字符< / 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，）; 
  

Consider the following HTML markup:

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

In the output, when users hover on the image, the value of the title attribute is displayed in a pop up. This is a nice idea to display information to the users.

But, this information is vanished when users click the image (please note users may tend to click rather than hovering)

What can I do (using jQuery for example) to keep the information visible (even if the user clicks) as far as the mouse pointer is on the image?

I tried the following, but this did not solve this issue:

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

EDIT : Are there any way to do "clicking is equal to hovering" in jQuery?

解决方案

You'll have to create your own tooltip.

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

You don't need JavaScript, pure CSS is enough:

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

Edit: If you don't want to touch your HTML, you can create the tooltips with script. Here's a jQuery example:

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

这篇关于点击后如何保持标题属性值可见？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！