WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

jQueryでマウスオーバー以外の要素を透明化

普段サイト制作を行うにあたり、マウスーオーバーでボタンなど
切り替えるのは頻繁に使うもの。
ボタン画像の色味を反転させたり、目立たせることで
マウスカーソルがそこに乗っているという認識がされるもの。

そんなマウスオーバーの表現は、
単純な切り替えやアニメーションを使った表現など様々ですが、
jQueryを使ってマウスが乗っている箇所以外を
透明化させることができるスクリプトが面白かったのでご紹介。

Using Opacity to Show Focus with jQuery

通常はマウスが乗った要素に対して何か処理を加えますが、
このスクリプトはマウスが乗った要素以外を目立たなくさせるもの。
逆転の発想っぽくておもしろい。

組み込みも簡単でjQuery大元ファイルと
下記スクリプトをページ上に読み込ませるのみ。
————————————–
<script type=”text/javascript”>
$(document).ready(function() {
$(‘.クラス名’).children().hover(function() {
$(this).siblings().stop().fadeTo(500,0.3);
}, function() {
$(this).siblings().stop().fadeTo(500,1);
});
});
</script>
————————————–
リスト(<ul>)など大枠にクラスをつけ、
スクリプト内に対象要素として記述するだけ。
透明度、スピードなど設定も可。

実際にサンプルとして試すと以下の様な感じに。
(画像&テキストにマウスオーバーしてみてください。)

※画像のモデルは先週から家族入りした「ちゃたろー(♂)」です。

ナビゲーションなんかの見せ方としても使えるところがありそうですね。

是非。。。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です