• Home
  • twitter
  • Facebook Page
  • google+
  • RSS
  • follow us in feedlyfeedly
  • Contact Form
OPEN

[はじめてのjQuery][css] jQueryを使用してhover時の画像にドロップシャドウがつくようにしてみた

jQuery Summit Notes
jQuery Summit Notes / Robert Banh

今日も今日とてjqueryのお勉強中、おつぱ( @OZPA )です。

「ページのトップに戻る」ボタンを実装してみたり、ブログの最上部に位置固定のソーシャルボタンとサイト内検索フォーム内蔵バーを配置してみたりしているわけですが、今回はjQueryを使用して、メインカラムの画像にカーソルを合わせた時にドロップシャドウをつけてみる挙動を仕込んでみました。


メインカラムの画像にhover時ドロップシャドウをつける

たまに、背景が白いスクリーンショットや透明なpngなどを貼り付けた際に、これまたバックグラウンドが真っ白な当ブログではどこが境界線なのかわからないということがよくありまして。

 

20120611 7312481068

こんな画像ですとどこが境界線がわからない。

でまぁ全ての白い背景画像にドロップシャドウを今から付けたりするのは面倒くさいので、jQueryを使用してhover時、画像にドロップシャドウを付ける挙動をつけてみました。

コード

css

まずはドロップシャドウのcssを追加しませう。

.imgDs {
	box-shadow: 0px 0px 5px #252525;
	-moz-box-shadow: 0px 0px 5px #252525;
	-webkit-box-shadow: 0px 0px 5px #252525;
}

 

jQuery

そして以下のjQueryをmy script.jsに追加。
(ヘッダーに追加する時は<script></script>でかこんでくだしあ。(<,>は半角で))

$(function(){
	$('#singlepost img').hover(
		function(){
			$(this).addClass('imgDs')
		},
		function(){
			$(this).removeClass('imgDs')
		}
	);
});

メインカラムの画像にのみドロップシャドウを追加したかったので、セレクタは「img」ではなく「#singlepost img」にしてあります。

仕組みとしては、画像にカーソルを合わると画像のimgに追加した「imgDs」クラスをオン、カーソルを外すと「imgDs」がオフになってドロップシャドウが外れるという感じ。

 

Skitched 20120608 183643

こんな感じ。
スマホだとわがんないですかね。

まぁやってみたい方はどうぞ!

[はじめてのjquery]ブログにあるととっても便利!「ページのトップに戻る」ボタンを実装してみた!! | OZPAの表4

[備忘録]ブログトップに、位置固定のソーシャルボタンとサイト内検索フォーム内蔵バーを配置してみた | OZPAの表4

SPONSORED LINK

FB Comments

About This Site

Mac,iPhone,Evernote,Web,Foodを中心に様々な情報をお届けするブログです。
ふざけた文体が目につきますが、本人はいたってふざけております。
ご意見・ご感想は info[at]ozpa-h4.com もしくはコンタクトフォームまでどうぞ。
広告掲載、執筆、取材などの依頼も受け付けております。
さらに詳しく

SNS

×