リンクのタイトルを表示させるには

質問

お世話になります。

http://cocomag.net/category/item/

中央のアイテム画像の下に説明が出ているソースを見るとaタグのtitleをブラウザ上に表示させていました。
同様の効果を自サイトでしたいと思ったのですが私の解析能力ではhtml・CSS・JAVASCRIPTのどの部分で操作しているのかわかりません。

ワードプレスで制作されているようなのでJqueryか何かのプラグインかとも考えてググって調べてみたところ、いくつかのページでJAVASCRIPTでマウスオーバーのときにaタグのtitleを表示させるというのは発見できたのですが、最初からブラウザに表示させることが書かれているページに辿り着けず、行き詰って困っております。

スキルの高い諸先輩方ならお分かりになる方もおられると思い質問させて頂きました。
どうぞよろしくお願いします。

回答No.1

ORUKA1951 · ベストアンサー

そのサイトは見てませんが、単純にスタイルシートの:after,:before擬似クラスと、内容の追加でよいのでは？？
ただし、IMG要素のような内容の無い要素には使えませんから、その親要素に指定します。
<p><a href="https://www.google.co.jp/" title="googleのサイト">Google</a></p>

a{position:relative;}
a:hover:before{content:attr(title)"!!!だよと言っているよ!!\Aわ～い";text-align:center;background-color:yellow;display:block;padding:0.5em 1em;color:red;position:absolute;top:-3em;left:0;white-space:pre;font-size:2em;}

:hoverなければ、常に表示されます。

とか・・・。

お礼

ありがとうございます。
こういうやり方もあるのですね、非常に参考になりました。

回答No.2

fujillin

スキルはまったくありませんけれど…

＞ソースを見るとaタグのtitleをブラウザ上に表示させていました。
ご質問のような操作も可能だとは思いますが、ソースをご覧になったのであればわかると思いますが、下に表示されているキャプションは
　<div class="topnewstitle">プカプカ浮かぶカバのシルエットが可愛い雑貨シリーズ　[erath +d]</div></a>
のようにソース内にそれぞれHTMLでマークアップされています。
それなので、別に特殊なことをやっているわけではなく、ソースがそのまま表示されているだけだと思いますが…

まぁ、このソース自体がサーバ側のプログラムから出力されている可能性が高いと思いますので、そちらで、キャプション部分のdiv要素をリンクタグのtitleと同じ文字列にして作成しているのではないかと推測します。

お礼

ありがとうございます。
まさに見落としてました。助かりました