jQueryでCSSの擬似要素:beforeや:afterのプロパティを変更する方法３種類 | ITハット
jQueryでCSSの擬似要素:beforeや:afterのプロパティを変更する方法３種類 jQueryで擬似要素を変更したいと思っても、:before や :after は非DOMなので普通にアクセスすることはできません。そこでどんな方法で変更できるのかまとめました。 デモ .button:before { content: 'ボタン'; } .change:before { content: 'クリック'; } HTMLとCSSはこんな感じ。クリックしたら content プロパティを書き換えるために、新たに .change クラスを作ります。 $('.button').on('click', function() { $(this).addClass('change'); }); あとは、addClass() すれば書き換えることができます。 2. スタイルを上書き .button:
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
