悬停时隐藏标题标签

Question

悬停时隐藏标题标签

htmlpopuptitleonhover

9

我翻译的结果是：

我查看了之前的问题，但没有一个能真正解决我的问题，我也查过谷歌，但找到的信息似乎非常模糊，所以我想在这里尝试一下。

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

是否有全局函数可以用于所有标题标签？例如：

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

如果可能的话，我希望在悬停时禁用“汽车服务”标题的显示。

再次感谢。

- Aaron Lee

6个回答

17

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

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

- Brad

这是我需要的。谢谢！ - Evgeniya Manolova

3

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

pointer-events: none;
cursor: default;

- Manarbre

1

更好的解决方案！ - Shumon Pal

2

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

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

- Gewitter

2

尽管标准JS已经回答了这个问题，但这里提供了一个jQuery解决方案。

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

- user1048682

0

你不能禁用它们，因为它们是浏览器/HTML规范的通用部分。但我知道你可以使用CSS和JavaScript来样式化它们，所以应该能够在某个地方使用display:none。

在这里查看。

- AlexMorley-Finch

这个方案可以正常工作，但它只是CSS3，我们需要它能够兼容所有浏览器。 - Aaron Lee

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shadow Wizard Chasing Stars · Accepted Answer

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

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

现场测试案例。

编辑：要将相同的内容应用于更多标签（例如<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);
};