Question

我在所有链接中都使用了title属性，但我不想在鼠标悬停时看到，但仍然可以在屏幕阅读器的代码中看到。

var links = document.getElementsByTagName('a');

for (var i = 0; i < links.length; i++) {
    if (links[i].className == 'suppress') {
    links[i]._title = links[i].title;
    links[i].onmouseover = function() { 
    this.title = '';
}

links[i].onmouseout = function() { 
    this.title = this._title;
}

Answer 1

使用jQuery，您可以在悬停时隐藏title attr，并在mouseout上替换它：

$(function(){

    $('a').hover(function(e){

        $(this).attr('data-title', $(this).attr('title'));
        $(this).removeAttr('title');

    },
    function(e){

        $(this).attr('title', $(this).attr('data-title'));

    });

});

喜欢this fiddle。

Answer 2

由于您使用的是jQuery，因此可以通过简单的方式完成：

$(document).ready(function(){
    $("a").removeAttr("title");
});

或者，将其设置为空值：

$(document).ready(function(){
    $("a").attr("title", "");
});

如果这会改变屏幕阅读器的阅读方式，那么你就可以直接定位。

$(document).ready(function(){
    $("a").hover(function(){
        $(this).attr("rel", $(this).attr("title"));
        $(this).removeAttr("title");
    }, function(){
        $(this).attr("title", $(this).attr("rel"));
        $(this).removeAttr("rel");
    });
});

Answer 3

我试图在CSS中创建一个泡泡工具提示，但浏览器工具提示会一直出现并搞砸了。所以，像你一样，我需要禁用默认的工具提示。

我使用了一些JQuery来删除＆＃34; Title＆＃34;标记，但仅限鼠标悬停。一旦鼠标退出，＆＃34;标题＆＃34;标签已恢复。

以下是DIV与一些＆＃34; Title＆＃34;含量：

<div class="tooltip-class" title="This is some information for our tooltip.">
  This is a test
</div>

现在，您可以运行以下JQuery来隐藏鼠标悬停时的Title标记：

$(document).ready(function(){
  $(".tooltip-class").hover(function(){
    $(this).attr("tooltip-data", $(this).attr("title"));
    $(this).removeAttr("title");
  }, function(){
    $(this).attr("title", $(this).attr("tooltip-data"));
    $(this).removeAttr("tooltip-data");
  });
});

以下是完整示例的链接：

http://jsfiddle.net/eliasb/emG6E/54/

Answer 4

$（“。element”）。hover（function（）{

    // Get the current title
    var title = $(this).attr("title");

    // Store it in a temporary attribute
    $(this).attr("tmp_title", title);

    // Set the title to nothing so we don't see the tooltips
    $(this).attr("title","");

});

$（“。element”）。click（function（）{//当我们离开元素时触发

    // Retrieve the title from the temporary attribute
    var title = $(this).attr("tmp_title");

    // Return the title to what it was
    $(this).attr("title", title);

});

使用javascript / jquery在鼠标悬停时隐藏链接的标题属性

4 个答案: