※ ChatGPTを利用し、要約された質問です（原文：CSSのツールチップにアニメーションをつける方法）
CSSのツールチップにアニメーションをつける方法
このQ&Aのポイント
CSSを使用してホバー時にアニメーションを持つツールチップを作成する方法について説明します。
ツールチップを作成する際には、HTMLとCSSを組み合わせて記述します。
ホバー時にツールチップにアニメーションを追加するためには、transitionプロパティを使用します。
CSSだけでマウスホバー時にツールチップを表示しています。
以下のように記述することで、ホバー時にツールチップが出るようになったのですが、アニメーションをつけたいと思っています。
HTML
============
<a href='#' class='tooltip'>用語<span>用語の説明</span></a>
============
CSS
============
a:hover {background:#f7f7f7; text-decoration:none;}
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:200px;}
a.tooltip:hover span{display:inline; position:absolute; border:1px solid #cccccc; background:#ffffff; color:#6c6c6c;}
============
ただ、実際にホバーするのは、ホバー時に表示する文字ではないので、どこにtransitionを記述すればいいかわかりませんでした。
こういう場合、どこにtransitionを追加してあげれば、ホバー時にアニメーションを追加できるのでしょうか？
以下のセレクタは試してみましたが、ホバー時にアニメーションはつきませんでした。
.tooltip{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
.tooltip span{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
}
ご教示いただけると幸いです。
よろしくお願いいたします。
お礼
お返事が遅れてすみません。 非常に具体的にアドバイスいただきありがとうございます。 大変参考になりました。