javascript - 画像にカーソルを合わせるとタイトルを非表示にすることはできますか？

Question

これは私のコードです：

<img src="image.jpg" alt="" title="some title" />

その画像にカーソルを合わせると、「タイトル」が表示されます。隠すことは可能ですか？

Answer 1

いくつかの回答が指摘しているように簡単に実行できますが、タイトルで何をしたいのかを知っていれば、 data-* カスタム属性を使用するか、タイトルを .data() で添付します

<img src="image.jpg" alt="" data-title="some title" />

また

$('img').data('title', 'some title');

Answer 2

属性を削除するのは簡単titleですが、「非表示にする」ことはできません（私が知る限り）。タイトルを削除するには、現在テストされていませんが、以下が機能するはずです。

$('img').hover(
    function(){
        $(this).data('originalTitle',$(this).title());
        $(this).removeAttr('title');
    },
    function(){
        $(this).attr('title',$(this).data('originalTitle');
    });

上記では、属性を移動してから、マウスアウトで置き換えることを選択しました。

完全に削除するにはtitle：

$('img').removeAttr('title');

参照：

• attr()。
• data()。
• hover()。
• removeAttr()。

Answer 3

それを画像データに移動できます...そして元に戻すことができます。そのように

$('img').hover(
  function () {
    $(this).data('title',$(this).attr('title')).removeAttr('title');
  }, 
  function () {
    $(this).attr('title',$(this).data('title'));
  }
);

Answer 4

はい！jQueryを使用すると、マウスオーバーで削除して、マウスアウトで再度追加できます-

$(function(){
  var ttext;
  $('img').hover(function(){
    ttext = $(this).attr('title');
    $(this).removeAttr('title');
  },
  function(){
    $(this).attr('title', ttext);
  });
});

Answer 5

いいえ、そうではありません。ただし、JavaScriptに置き換えることも、空白のままにすることもできます。

jQueryの例：

$('[title]').removeAttr('title');

Answer 6

少なくともChromeでjQuery / jQuery UIを試して作業したこと：

1. タイトルを付けたい (および付けたくない) オブジェクトを作成します。
2. これらの項目がすべて揃ったら、ツールチップを追加します。
3. ツールチップを通常の方法で表示したくないすべての項目を確認し、ツールチップを に設定し''ます。

名前付きの HTML 要素が利用可能になった後に発生する私のコードの例:

jQuery(document).tooltip();
for(var index = 0; index < sites.length; ++index) {
    jQuery('#' + sites[index][0]).attr('title', '');
}

Answer 7

スタック オーバーフローで、5 人が同時に同じ答えを出すことができるのはちょっと面白いです :P

$(function(){
    $('img').hover(function(){
        $(this).removeAttr('title');
    }, function(){
        $(this).attr('title','some title');
    });
});