今回の記事では要素をhover時に色を変えたり、透過させたりして変化させるやり方を紹介いたします。

まずは通常の状態から見ていきます。

このように青色の四角形があったとします。

この四角形をhover時に色を変えてみます。

やり方

この四角形のクラス名を.boxとします。

.box:hover {color:#78EFFF}と指定します。

すると・・・

するとhover時に色を変えることができました。

透過させたい時も同様

ox:hover {opcity:0.7;}と指定します。

すると

このように透過させることができました。