html - CSSでリンクからタイトルを非表示にすることはできますか?

Question

title 属性を持つアンカー要素があります。ブラウザウィンドウでホバーしたときに表示されるポップアップを非表示にしたい。私の場合、このようなことはできませんが、

$("a").attr("title", "");

jQuery Mobile により、特定のイベントが発生した後にタイトルが再表示されます (基本的に、アンカー要素が再描画されるたびに)。というわけで、CSSでタイトルを非表示にしたいと考えています。

何かのようなもの：

a[title] {
    display : none;
}

アンカー要素全体を非表示にするため、機能しません。タイトルだけ隠したいこれは可能ですか？ポップアップは表示されません。

score 26 · Accepted Answer

次の CSS プロパティを使用すると、ホバー時にタイトル属性テキストが表示されなくなります。

pointer-events: none;

この CSS プロパティを使用すると、要素がマウスイベントの対象にならないことが保証されるため、JS の方が優れたソリューションであることに注意してください。

score 12 · Accepted Answer

内部テキストをスパンでラップし、空のタイトル属性を与えることができます。

<a href="" title="Something">
  <span title="">Your text</span>
</a>

score 12 · Accepted Answer

@boltClock の提案によると、ここでは CSS ソリューションは適切ではないと思います。これは、ブラウザがリンクのタイトル属性をどうするか、またはそれに関することを決定するためです。私の知る限り、CSS はこの問題を処理できません。

前述のように、jQuery を使用してタイトルを空の文字列に置き換えることはできません。これは、jQuery モバイルがいくつかの時点でタイトルを書き換えるためです。ただし、これは JQM とは独立して機能し、SEO で重要な title 属性を完全に削除する必要はありません。

これは機能します：

$('a["title"]').on('mouseenter', function(e){
    e.preventDefault();
});

$('body').on('mouseenter')テスト後、最初のコードをこれに変更しました。これは動作することが確認されています。

score 2 · Accepted Answer

CSS では、コンテンツを DOM に追加することしかできないため、これは不可能です (通常は:before :afterandを使用しcontent: '...';、属性を削除または変更することはできません。

唯一の方法は、ライブカスタムイベントを作成することです (es. "change-something"):

$("a").on("change-something", function(event) { this.removeAttr("title"); });

すべての変更に対してトリガーします。

... $("a").trigger("change-something");

詳細とデモはこちら:

6 に答える 6