css-hover

賢威テンプレートを導入して、最初に追加設定したCSSは「画像リンクをマウスオーバーで半透明にする」よう設定しました。

ソースコードを読んでみて、画像リンクに関してのCSSは見当たらなかったんですね。SEO的に画像リンクはいけないのかな? とも思いましたが、やっぱり画像のマウスオーバーで半透明になるとリンクしているとわかると思ったので、EVERNOTEに蓄積しておいたCSSノートからひっぱって設定してみました。

追加したコードは以下のとおりです。

利用したのは、サイドバーの画像リンク。部分的に使いたかったので、div要素のクラスを「alpha」とし、該当する画像リンクのみに適応するよう設定しました。

これで、alphaと指定したdiv要素の中の画像リンクが、半透明に設定できます。-webkit とか -moz とかよくわからないまま今まで設定していたのですが、それぞれSafari、firefox、Chrome、IE用のコードで、それぞれ違うんですね。

ということはわかったのですが、どれがどのブラウザに対応したソースコードなのか、メモを取ってなかったので忘れてしまいました……。上記の場合、0.4秒で半透明にしますよ。不透明度は70%にしますよ、というコードになります。