0

我在所有链接中都使用了 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;
}
4

4 回答 4

3

使用 jQuery，您可以在悬停时隐藏title属性，并在鼠标移出时替换它：

$(function(){

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

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

    },
    function(e){

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

    });​

});

就像在这个小提琴中一样。

于 2012-09-30T17:40:57.437 回答
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");
    });
});
于 2012-09-30T17:40:23.580 回答
0

我试图在 CSS 中创建一个气泡工具提示，但浏览器工具提示总是会出现并把事情搞砸。所以，和你一样，我需要禁用默认工具提示。

我使用了一些 JQuery 来删除“标题”标签，但仅在鼠标悬停时。鼠标一出，“标题”标签就会恢复。

以下是包含一些“标题”内容的 DIV：

<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/

于 2015-03-02T16:37:31.867 回答
0

$(".element").hover(函数(){

    // 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);

});
于 2020-06-04T06:22:29.557 回答