![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
お世話になります。
http://cocomag.net/category/item/
中央のアイテム画像の下に説明が出ているソースを見るとaタグのtitleをブラウザ上に表示させていました。
同様の効果を自サイトでしたいと思ったのですが私の解析能力ではhtml・CSS・JAVASCRIPTのどの部分で操作しているのかわかりません。
ワードプレスで制作されているようなのでJqueryか何かのプラグインかとも考えてググって調べてみたところ、いくつかのページでJAVASCRIPTでマウスオーバーのときにaタグのtitleを表示させるというのは発見できたのですが、最初からブラウザに表示させることが書かれているページに辿り着けず、行き詰って困っております。
スキルの高い諸先輩方ならお分かりになる方もおられると思い質問させて頂きました。
どうぞよろしくお願いします。
No.1ベストアンサー
- 回答日時:
そのサイトは見てませんが、単純にスタイルシートの: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
- 回答日時:
スキルはまったくありませんけれど…
>ソースを見るとaタグのtitleをブラウザ上に表示させていました。
ご質問のような操作も可能だとは思いますが、ソースをご覧になったのであればわかると思いますが、下に表示されているキャプションは
<div class="topnewstitle">プカプカ浮かぶカバのシルエットが可愛い雑貨シリーズ [erath +d]</div></a>
のようにソース内にそれぞれHTMLでマークアップされています。
それなので、別に特殊なことをやっているわけではなく、ソースがそのまま表示されているだけだと思いますが…
まぁ、このソース自体がサーバ側のプログラムから出力されている可能性が高いと思いますので、そちらで、キャプション部分のdiv要素をリンクタグのtitleと同じ文字列にして作成しているのではないかと推測します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
- JavaScript 空白で入力フォームのボタンをクリックしたら、ブラウザの上部からjavascriptで 表示されるアラ 1 2022/05/20 11:16
- アプリ Edgeを操作するアプリについて 4 2023/05/11 22:48
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- その他(プログラミング・Web制作) ワードプレスのプラグインであるAddQuicktagを使いたいが… 3 2022/04/18 15:03
- ドメイン・サーバー・クラウドサービス 自作サイトをサーバーにアップロードしたのですが… 2 2022/11/08 18:12
- その他(インターネット接続・インフラ) ブラウザにIPアドレス入力した時 1 2022/06/16 19:08
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- Yahoo!メール yahooメールの検索結果を全て表示するには? 1 2023/05/16 14:34
- JavaScript HTML&CSS Javascriptによる動的テーブル 1 2023/03/27 19:51
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JSPの実行結果をHTMLに変換
-
c言語の改修されたソースから改...
-
縮小版のサムネイルの取得(画像...
-
phpとaspの違い? 実力の違い?
-
プログラム時のヘッダコメント...
-
htmlでソースを表示させたくな...
-
【VB.NET】WebページのDOMソー...
-
VC++でマイクを使いたいんですが……
-
実行オブジェクトからソースを...
-
HTMLからフォルダを開きたい
-
htmlの中にexcelが埋め込むには...
-
Dreamweaverでページ全体が文字...
-
iPadの標準ブラウザでローカルH...
-
form action="#"
-
css ,videotタグ。ホームページ...
-
POSTしたデータの文字コードがu...
-
一つのリンクに複数のURLを指定
-
社内で利用するWebサイトを立ち...
-
googleドライブで、PDFファイル...
-
どのページもすべて同じURLなの...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
レストラン、英語のメニュー表記
-
VBAで#Regionに変わるものは無...
-
Dreamweaverのコードカラーが黒...
-
ソースの追加行数と変更行数
-
#ifdef多用でソースが見づらい
-
JSPの実行結果をHTMLに変換
-
VBAでhtmlソースから特定の文字...
-
画像と文字が重なって表示される。
-
VB詳しい方
-
「MicrosoftVisualBasic6.0 行...
-
ソースの表示を無効にする方法。
-
htmlのタブの色変更について
-
【VB.NET】WebページのDOMソー...
-
c言語の改修されたソースから改...
-
Visual Source Safe?
-
VisualStudio2010でデバッグソ...
-
COBOLのCALL文について
-
google Map APIの使い方
-
HTMLのソースを文字化けさせる...
-
phpとaspの違い? 実力の違い?
おすすめ情報