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

そんなマウスオーバーの表現は、
単純な切り替えやアニメーションを使った表現など様々ですが、
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>)など大枠にクラスをつけ、
スクリプト内に対象要素として記述するだけ。
透明度、スピードなど設定も可。

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

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

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

是非。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

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

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner