クリックした後にタイトルの属性値を見えるようにするには?

次のHTMLマークアップを考えてみましょう。


出力では、ユーザーが画像にカーソルを置くと、title属性の値がポップアップで表示されます。これは、ユーザーに情報を表示するための良いアイデアです。

しかし、ユーザーが画像をクリックすると、この情報は消えてしまいます(ユーザーはホバリングではなくクリックする傾向があります)

マウスポインタが画像上にある限り、(たとえユーザーがクリックしても)情報を見えるようにするにはどうすればよいですか(例えばjQueryを使用して)?

私は次のことを試しましたが、これでこの問題は解決しませんでした:

jQuery('img[src="info.png"]').click(function(event){
    event.preventDefault();
        });

EDIT : Are there any way to do "clicking is equal to hovering" in jQuery?

2

2 答え

独自のツールチップを作成する必要があります。


Password should contain 6-10 characters

あなたはJavaScriptを必要とせず、純粋なCSSで十分です:

img[src=info.png] + span {
    display: none;
}
img[src=info.png]:hover + span {
    display: inline;
}

Edit: If you don't want to touch your HTML, you can create the tooltips with script. Here's a jQuery example:

var img = $("img[src=info.png]");
$("").text(img.attr("title")).insertAfter(img);
img.attr("title", "");
2
追加された
良いですが、HTMLマークアップを変更せずにこのアイデアを変更することは可能ですか?
追加された 著者 siva636,
ここでの問題は、の内容を配置してスタイルを設定することです。
追加された 著者 siva636,
あなたはスクリプトでそれを行うことができます。私は答えを例で更新します。
追加された 著者 gilly3,
私は理解していない。あなたはスパンをスタイルする方法を尋ねていますか?上記で提供したCSSを使用し、必要に応じてスタイル属性を追加します。あなたはもっと具体的になりますか?
追加された 著者 gilly3,

img title または a link の表示はブラウザによって異なります。それ以上のコントロールはありません。独自の振る舞いを持ち、この動作がブラウザ間で行われていることを確認するには、次の操作が必要です。

  1. すべての title を削除してデフォルトのブラウザ動作を取り除く alt 属性
  2. 多くのツールチップを使用して独自のツールチップを再実装する 利用可能なライブラリ

がんばろう

1
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript