如何在单击后保持title属性值可见

How to keep the title attribute value visable after clicking?

本文关键字：属性 title 单击      更新时间：2023-09-26

考虑以下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中是否有办法做到"点击等于悬停"?

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

<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;
}

Edit:如果你不想碰你的HTML，你可以用脚本创建工具提示。下面是一个jQuery示例:

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

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

  1. 删除所有的title和默认浏览器行为alt属性
  2. 重新实现自己的工具提示使用许多之一库可用
好运

相关文章：