【CSS】ポインタがあっているときだけウインドウを出す

いままでJavascript使ってウインドウを表示したり、閉じたりしてましたが、最近CSSだけでなんとかなるという記事を書いてました。気づきませんでした（笑）
「もうぐちゃぐちゃやらなくてもできてるぞ」
と、過去の自分に教えてあげたい（笑）

それではこのブログで実装再現してみます。

ここのpタグにポインタを合わせる

こんな感じで説明文が出ます。
CSSでアニメ設定すればこのようにゆっくりフェードイン表示もできます。
きっかけにしているpタグは詳細なアニメ設定なしでCSSのtransitionでゆっくり変化させてます。

今回のコードはとても簡単なので、アニメ付きで載せます。

CSS側
/*アニメーション*/
@keyframes fade{/*fedeは自由につけれるアニメの名前*/
   /*この中で開始の状態から終わりの状態のアニメを指定します。
   間に経過を入れることも可能です*/
   0%{
      opacity :0;
   }
   100%{
      opactiy :1;
   }
}

.hide{
   display     :none;
}

.window_switch:hover~.hide{
  display     :block;
  animation-name : fade;/*上で設定した名前*/
  animation-duration : 2s;/*アニメの動作時間*/
}

HTML側
<p class="window_switch">ここにポインタを合わせる</p>
<p class="hide">説明文</p>

いやー、とても簡単。やれること多いですね〜。これもhover変えたり、つける要素をimgとかaとかにすれば広がりますね。

このページのサンプルもポインタが要素に合ったら色を変えるCSSが入っています。

始めの頃、私classの使い方もよくわからなかったです。
classの名前が半角スペースで列記できると知ってからやれること増えましたからね!
具体的に書くと、例えばフォントのスタイルを指定するclass名がfont_styleで、要素のスタイルを指定するclass名がbox_styleだったとすると

<p class="font_style box_style">

と書けます。こんな感じでどんどん繋げられます。後優先です。
CSS側も同じスタイルを使うなら、クラス名はカンマ区切で列記できます。
この記事のウインドウも表示を消すクラスとウインドウのスタイルは分かれています。こういうことが最初からわかっていれば、きれいにCSSを分けて書けたのになぁ。。。とちょっと前にかなり後悔しましたよ（笑）

スキルが足りないまま作り始めた自分のサイトも結局再構築です。
なんだかんだで、自分のスキルは不足してたんだな〜と実感しています。
結局プログラミングで仕事はできなかったんで、今後はガッツリ趣味によせてやっていきます！！