HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

画像にマウスオンで半透明にする

body の前に
<style>
.hover-transpare:hover{
opacity:0.5;
}
</style>
 :
<img src="・・・" class="hover-transpare">
<!-- 文字でも行けるさ -->
<div class="hover-transpare">TEXT</div>
これだとリンクだろうが何だろうがカモ~ン。

リンクだけにつけようってのなら。
<style>
a:hover{
opacity:0.5;
}
</style>

悪いんだけど、リンクのついた画像だけにしてくんない?
a > img:hover{
opacity:0.5;
}
この opacity の後ろの数字が透明度の強さを表す。 1~0 で 百分率。
0でまったく透明にしないって意味合いだな。

古いバージョンのIEだと、これは機能しないので・・・
filter:Alpha(opacity=50); という書き方をする。
a:hover{
opacity:0.5;
filter:Alpha(opacity=50);
}

スポンサーリンク

スポンサーリンク

カテゴリー