a:hoverの重さ

質問

こんにちは。
マウスを乗せたときに背景色を変えることもできる為、重宝しているＣＳＳのa:hoverなのですが、とても重いのです。

マウスを乗せたときに背景色を変える処理を行っているのですが、マウスを乗せた途端、CPU使用率が９０％を超え、格段にスピードが落ちます。

しかし、文字色を変える処理だとスムーズに動くのです。

さらに背景色を変える処理も、ホームページによってはスムーズに動く。
この違いが全く分かりません。

この現象の原因、出来れば解決策まで教えてください。

回答No.1

notnot

元の背景、変える背景のどちらかが、CSSでの色指定ではなく背景画像を使っていて、しかもそれが縦横1ピクセルの画像の繰り返しだったりするとCPUを使いそうです。
どちらの背景も、CSSで色を指定しているだけだとすると、他に何か原因があると思うのですが。

お礼

回答ありがとうございます。

a:hoverに関わる部分だけを取り出してみたところ、重くなる現象が消えました。
使いどころを考えなくてはいけない、と言う事なのでしょうか・・・。