マウスをかざして指定した画像だけ白く光らせる方法

2014年05月14日 [ワードプレス, 賢威]

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ご訪問有難うございます。

1 マウスを当てると指定した場所だけ白く光るようにしたい
2 Google+

マウスを当てると指定した場所だけ白く光るようにしたい

以前、マウスを当てると画像やリンクテキストやURLが白く光ったり動いたりする方法を書きましたが、指定するところだけ白く光らせる場合を書いていきたいと思います。

以前書いた方法ですとすべてのリンク画像とリンクテキスト・リンクURLが白く光りますので、そうではなくて指定してその部分だけ光らせることが可能になる方法です。

参考URL⇒http://seoiinuma.com/archives/1980

design.cssに下記のコードを追加すると
画像にカーソルを合わせた時に
白く光るようになります。

デザインCSSの一番下に追加。

a:hover img {
filter : alpha(opacity=80);
opacity : 0.8 ;
}

上の記述ですとすべてのリンク画像が白く光りますので、指定をしてやることでかのうとなります。

ページ内の画像全てに適用される方法になりますので、特定の部分を対応させたい場合は、以下記述のように特定のクラスに対して記述を指定していただく事で、対応が可能です。

HTML

CSS
.test a:hover img {
filter : alpha(opacity=80);
opacity : 0.8 ;
}

コピーアンドペーストで使用できますので使ってみてください。クリックして欲しい部分を強調できますので簡単にできて効果がある方法です。

サイト訪問者や検索者の直帰率を下げる為やユーザビリティー向上のために試してみてください。

以上でした。

photo by: T.78UopXx

タグ：ユーザビリティー, ロールオーバー, 直帰率

マウスをかざして指定した画像だけ白く光らせる方法