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 に答える