悬停时隐藏标题标签答案

【问题标题】：Hiding title tags on hover悬停时隐藏标题标签
【发布时间】：2011-11-10 10:53:37
【问题描述】：

我查看了以前的问题，但没有一个对我真正有用，我检查了谷歌，我发现的信息似乎很模糊，所以我想我会在这里尝试。

是否有人知道/或已经解决了在悬停时显示标题标签的问题。我有一系列链接和图像将被分配标题标签，但是，其中一些将显示最好不要在悬停时弹出的信息。

我可以使用一个全局函数将其应用于各种标题标签吗？一个例子如下：

<a href="service.php" title="services for cars" />

如果可能的话，我想禁用悬停时出现的标题“来自汽车的服务”。

再次感谢。

【问题讨论】：

标签： html popup title onhover

【解决方案1】：

这应该可以很好地禁用单个标题：

<a href="service.php" title="services for cars" onmouseover="this.title='';" />

如果你以后需要标题，你可以恢复它：

<a href="service.php" title="services for cars" onmouseover="this.setAttribute('org_title', this.title'); this.title='';" onmouseout="this.title = this.getAttribute('org_title');" />

这种方式虽然不是通用的.. 要将其应用于所有锚点，请使用这样的 JavaScript 代码：

window.onload = function() {
    var links = document.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
        var link = links[i];
        link.onmouseover = function() {
            this.setAttribute("org_title", this.title);
            this.title = "";
        };
        link.onmouseout = function() {
            this.title = this.getAttribute("org_title");
        };
    }
};

Live test case.

编辑：将相同的标签应用于更多标签（例如<img>）首先将代码的核心移动到一个函数：

function DisableToolTip(elements) {
    for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        element.onmouseover = function() {
            this.setAttribute("org_title", this.title);
            this.title = "";
        };
        element.onmouseout = function() {
            this.title = this.getAttribute("org_title");
        };
    }
}

然后把代码改成：

window.onload = function() {
    var links = document.getElementsByTagName("a");
    DisableToolTip(links);
    var images = document.getElementsByTagName("img");
    DisableToolTip(images);
};

【讨论】：

干杯！请注意，window.onload 将“覆盖”您可能拥有的任何其他 onload 事件，因此请记住这一点。 :)
编辑也有效，但只适用于标签，难道它也不适用于图像吗？
再次感谢，但是......我仍然无法让它工作，我把它放在了一个小提琴中：jsfiddle.net/yjQwp我已经在我的头标签中包含了 js 文件，然后希望它会起作用，但它就是不起作用。
jsFiddle 默认情况下使用 MooTools onload 包装所有内容，请参阅this updated fiddle，因为它没有包装任何内容，所以它工作正常。你还能重现这个问题吗？

【解决方案2】：

如果您使用“title”标签的原因是为了符合 Aria，请改用 aria-label。

<a href="service.php" aria-label="services for cars" />

【讨论】：

这就是我所需要的。谢谢！

【解决方案3】：

虽然这已经在标准 JS 中得到了回答。

这是一个 jQuery 解决方案。

$('a').hover( 
  function() {
        $(this).attr("org_title", $(this).attr('title'));
        $(this).attr('title', '');
  }, function() {
        $(this).attr('title', $(this).attr("org_title"));
  }
);

【讨论】：

【解决方案4】：

一个简单的替代方法是在图像的容器（div 或 a）上使用 CSS：

pointer-events: none;
cursor: default;

【讨论】：

【解决方案5】：

尝试设置两个标题，一个会被浏览器选择为工具提示的空标题，然后是您需要的标题：

    <a href="service.php" title="" title="services for cars" />

【讨论】：

【解决方案6】：

您不能禁用它们，因为它是浏览器/html 规范的通用部分。但我知道您可以使用 css 和 javascript 设置它们的样式，因此 display:none 应该可以在某处正确使用。

看here

【讨论】：

这可以正常工作，但它只有 CSS3，我们需要它与所有浏览器兼容。