<a class="tooltip"><span>ツールチップ</span></a>
a.tooltip span {
display: none;
}
a.tooltip:hover span {
display: block;
}
上記のようにしてcssだけでツールチップを実装しています。
これを応用して、クリッカブルマップにツールチップを実装したいのですが
<map>
<area shape="rect" coords=",,,"/>
</map>
このようにタグが<a>の場合と異なっており、どのように記述すればよいのかわかりません。
やり方を教えてほしいです。
どうぞよろしくお願いします。
No.1ベストアンサー
- 回答日時:
area には hover をかけることができないので、
画像の上に レイヤーのように 擬似空間を作り、そこに a で指定してあげる方法が
よいと思います。
擬似空間の作り方は、透明gifを 乗せる等です。
.parent{position:relative;top:0;}
.child{position:absolute;top: --;left: --;}
a.tooltip span{display:none;}
a.tooltip:hover span{display:block;}
<div class="parent">
<img src="" alt="この画像はbackgroundにしてもいいかもしれません">
<div class="child"><a class="tooltip" href=""><img src="透明.gif" alt=""><span>aaa</span></a></div>
</div>
また jquery を使うという 方法もあるとおもいます。
その場合はarea でも いけるとおもいます。コード書き換えは発生すると思いますが。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript htmlとcssで分数を表示後、分数の右側に文書を書きたい 1 2022/04/28 10:09
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS 分数が正常に表示されない。 6 2022/05/09 18:53
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- その他(プログラミング・Web制作) pythonのWebスクレイピングでfind_allだとurlがNoneに 4 2022/04/17 18:21
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのクラス名・ID名の指定でワ...
-
idの中のid指定
-
htmlのid属性って必要なの?
-
HTML要素のid/class名の長さに...
-
【CSS】特定のリンクを含むaタ...
-
CSSに同じclass名がいっぱい‥。...
-
liリストタグの背景色に色がつ...
-
ライブドアブログの背景色を変...
-
cssで、全体を中央寄せ、文字は...
-
子孫セレクタの読み方をおしえ...
-
CSS リンクのスタイル指定をせ...
-
<span>で2重にかけているものを...
-
HTML,CSS:文章内の文字を強調...
-
CSSが効かずどのように指定すれ...
-
ブログの本文のみリンク色を変...
-
マウスを重ねたら下線が出る
-
「目次」と「サブ目次」のスタ...
-
透過背景を解除するにはどうす...
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
個別にリンクの色を変える方法
-
CSSのクラス名・ID名の指定でワ...
-
CSSに同じclass名がいっぱい‥。...
-
idの中のid指定
-
最近、HTMLのヘッダーをIDで定...
-
liリストタグの背景色に色がつ...
-
HTML要素のid/class名の長さに...
-
brにクラスをつけてcssでdispla...
-
透過背景を解除するにはどうす...
-
htmlのid属性って必要なの?
-
フロートのクリアについて
-
ページの左右の余白(枠外)に...
-
サイトにjQueryが使用されてい...
-
CSS, リンクの色を一部変えるに...
-
スタイルシートでデザイン
-
外部css定義したclassをht...
-
Bootstrap3でcontainerがずれる...
-
CSSで、DIV#hogeという記述は何...
-
スタイルシートで、id属性の中...
-
一部のリンクの下線を消す
おすすめ情報