使用 javascript/jquery 在鼠標懸停時隱藏鏈接的標題屬性

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屬性，並在鼠標懸停時替換它：

$(function(){

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

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

    },
    function(e){

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

    });​

});

就像在這個小提琴中一樣。

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 來刪除“標題”標簽，但只在鼠標懸停時。 一旦鼠標離開，“標題”標簽就會恢復。

以下是帶有一些“標題”內容的 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/

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

});