- ベストアンサー
CSSのツールチップにアニメーションをつける方法
- CSSを使用してホバー時にアニメーションを持つツールチップを作成する方法について説明します。
- ツールチップを作成する際には、HTMLとCSSを組み合わせて記述します。
- ホバー時にツールチップにアニメーションを追加するためには、transitionプロパティを使用します。
- midorinodonchan
- お礼率97% (101/104)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
:hover擬似クラスで変化しないセレクタの宣言に書きます。たとえば<dfn><abbr title="Hyper Text Markup Language">HTML</abbr><span>ハイパー・テキスト・マークアップ言語</span><dfn>は、リンク機能を持つテキストを・・・ でしたら dfn{position:relative;} dfn abbr[title]+span{visibility:hidden;width:5em;transition******} dfn abbr[title]:hover+span{width:10em;visibility:bisible;} というふうに・・ ※display:hiden→dispaly:block;は原理的に不可能です。 サンプル--abbrのtitleについて指定してみました。示されたHTMLは、HTML的におかしいので・・ :hover擬似クラス(動的な擬似クラス)はa要素以外にも適用されます。(古いIEは理解しませんが、どうせそやつはtrnsitionも理解しないので)、#以降が書かれていない不適切なHTMLを書く必要はありません。 ★HTML4.01strict ★CSS3 ※タブは＿に置換してあるので戻すこと。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- p{line-height:1.4em;} abbr{position:relative;} abbr:after{ ＿content:attr(title); ＿white-space:pre; ＿position:absolute; ＿bottom:1.4em;left:0; ＿border:solid navy 1px; ＿width:6em; ＿font-size:0.4em; ＿padding:0.2em 0.5em; ＿background-color:blue; ＿visibility:hidden; ＿transition-property: visibility,font-size,background-color; ＿transition-duration:10s; ＿transition-timing-function:ease-in-out; ＿-moz-transition-property: visibility,font-size,background-color; ＿-webkit-transition-property: visibility,font-size,background-color; ＿-o-transition-property: visibility,font-size,background-color; ＿-ms-transition-property: visibility,font-size,background-color; ＿-moz-transition-duration:1s; ＿-webkit-transition-duration:1s; ＿-o-transition-duration:1s; ＿-ms-transition-duration:1s; ＿-moz-transition-timing-function:ease-in-out; ＿-webkit-transition-timing-function:ease-in-out; ＿-o-transition-timing-function:ease-in-out; ＿-ms-transition-timing-function:ease-in-out; } abbr:hover:after{ ＿visibility:visible; ＿font-size:1em; ＿background-color:aqua; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>水分子は、<abbr title="元素記号:H 原子量:1.002">水素</abbr>原子２個と<abbr title="元素記号:O 原子量:16.000">酸素</abbr>原子１個でできている３原子分子です。</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2005-06-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2005-06-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2001 - 2004 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
お礼
お返事が遅れてすみません。 非常に具体的にアドバイスいただきありがとうございます。 大変参考になりました。