jQuery APIリファレンスイベント操作：相互作用
- hover(over, out)〔要素にマウスオーバーした時、マウスアウトした時の動作を設定〕
- toggle(fn, fn2[, fn3, fn4, ...])〔クリックするたびに複数の関数を切り替え〕
hover(over, out)
要素にマウスオーバーした時、マウスアウトした時の動作を設定
2009/2/27
hover(over, out) 戻り値：jQuery
要素にmouseoverした時、mouseoutした時の動作を設定します。
マウスカーソルがマッチした要素に乗っている時に、第1引数overに指定した関数が実行され、マウスが要素から離れた時に第2引数outに指定した関数が実行されます。
指定した要素自身にmouseoverしている限り、mouseoutにはなりません。 例えば、div要素にhoverイベントを設定している場合、div要素の中にあるimg要素にmouseoverしても、div要素の中にマウスが乗っていることになるので、mouseoutイベントは発生しません。
第1引数overには、マッチした要素にマウスが乗った時に実行する関数を指定します。
function callback(イベントオブジェクト){ this; /* DOM要素 */ }第2引数outには、マッチした要素からマウスが離れた時に実行する関数を指定します。
function callback(イベントオブジェクト){ this; /* DOM要素 */ }
hoverの使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>イベント操作：相互作用：hoverの使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("li").hover(
function(){
$(this).append($("<span> ***</span>"));
},
function(){
$(this).find("span:last").remove();
}
);
//Another example for mouse over effect on hyperlinks on page
$("a").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
});
</script>
<style type="text/css">
ul { margin-left:20px; color:blue; }
li { cursor:default; }
span { color:red; }
</style>
</head>
<body>
<div id="wrap">
<h1>イベント操作：相互作用：hoverの使用例 | jQuery</h1>
<p>▼リストアイテムにマウスオーバーした時に指定したスタイルを追加します。</p>
<!-- CODE -->
<ul>
<li>Milk</li>
<li>Bread</li>
<li><a href='#'>Chips</a></li>
<li><a href='#'>Socks</a></li>
</ul>
<!-- / CODE -->
</div>
</body>
</html>
例：リンクのマウスオーバー・アウト時の背景をスライドアップ・ダウン
参照：Link Underlines Grow to Backgrounds on Hover
hoverの使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>イベント操作：相互作用：hoverの使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var $el = $(),
linkHeight = parseInt($("p").css("line-height")),
speed = 175; // 1000 = 1 second
$("#demo a").each(function() {
$el = $(this);
// If the link spans two lines, put a line break before it.
if ($el.height() > linkHeight) {
$el.before("<br>");
}
$el.prepend("<span></span>");
}).hover(function() {
$el = $(this);
$el.find("span").stop().animate({ height: linkHeight, opacity: 0.3 }, speed);
}, function() {
$el = $(this);
$el.find("span").stop().animate({ height: "1px", opacity: 1 }, speed);
});
});
</script>
<!-- CSS -->
<style type="text/css">
#demo a { text-decoration: none; color: #900; position: relative; }
#demo a span { position: absolute; bottom: -1px; width: 100%; height: 1px; left: 0; background: #900; z-index: 100; }
</style>
</head>
<body>
<div id="wrap">
<h1>イベント操作：相互作用：hoverの使用例 | jQuery</h1>
<p>【参照】<a href='http://css-tricks.com/link-underlines-grow-to-backgrounds-on-hover/'>Link Underlines Grow to Backgrounds on Hover</a></p>
<p>リンクのマウスオーバー・マウスアウト時に、リンクの背景をスライドアップ・ダウンします。</p>
<!-- CODE -->
<ul id="demo">
<li><a href="http://www.flickr.com/photos/22559849@N06/3274514408/">アボカド シーザーサラダ</a></li>
<li><a href="http://www.flickr.com/photos/22559849@N06/3273696469/">ベーコンとアボカドのピザ（トマトソース）</a></li>
</ul>
<!-- / CODE -->
</div>
</body>
</html>
例：画像にマウスオーバーした時にズームアイコンを画像上に表示
参照：Add zoom icon to images using CSS (and jQuery, of course)
jQueryを使用して、画像にマウスオーバーした時に、画像上にズームアイコンをアニメーション表示する方法が掲載されています。 CSSだけでも、ズームアイコンの表示・非表示切替を行うことはできますが、jQueryを使用することで、ズームアイコンの表示・非表示切替にアニメーション効果を付けることができます。
hoverの使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>イベント操作：相互作用：hoverの使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
/* 例2 */
$("#gallery2 a").append("<span></span>");
$("#gallery2 a").hover(function(){
$(this).children("span").fadeIn(600);
},function(){
$(this).children("span").fadeOut(200);
});
});
</script>
<!-- CSS -->
<style type="text/css">
/* 例1 */
#gallery1 { width:100%; overflow:hidden;}
#gallery1 a { position:relative; float:left; margin:5px;}
#gallery1 a span { display:none; background-image:url("/content/img/icon/24/zoom.png"); background-repeat:no-repeat; width:48px; height:48px; position:absolute; left:15px; top:15px;}
#gallery1 a:hover span { display:block;}
#gallery1 img { border:solid 1px #999; padding:5px;}
/* 例2 */
#gallery2 { width:100%; overflow:hidden;}
#gallery2 a { position:relative; float:left; margin:5px;}
#gallery2 a span { background-image:url("/content/img/icon/24/zoom.png"); background-repeat:no-repeat; width:48px; height:48px; display:none; position:absolute; left:15px; top:15px;}
#gallery2 img { border:solid 1px #999; padding:5px;}
</style>
</head>
<body>
<div id="wrap">
<h1>イベント操作：相互作用：hoverの使用例 | jQuery</h1>
<h2>画像にマウスオーバーした時にズームアイコンを画像上に表示s</h2>
<p>参照：<a href='http://www.jankoatwarpspeed.com/post/2009/04/06/Add-zoom-icon-to-images-using-CSS-and-jQuery.aspx'>Add zoom icon to images using CSS (and jQuery, of course)</a></p>
<p>CSSだけでも、ズームアイコンの表示・非表示切替を行うことはできますが、jQueryを使用することで、ズームアイコンの表示・非表示切替にアニメーション効果を付けることができます。</p>
<!-- CODE -->
<div id="gallery1">
<h2>例1：CSSのみ</h2>
<a href="http://www.flickr.com/photos/22559849@N06/3274514408/">
<span></span>
<img src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_m.jpg" alt="アボカド シーザーサラダ" />
</a>
<a href="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_m.jpg">
<span></span>
<img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_m.jpg" alt="アボカド刺" />
</a>
<a href="http://www.flickr.com/photos/22559849@N06/3273696469/">
<span></span>
<img src="http://farm4.static.flickr.com/3427/3273696469_aa2aaf5e89_m.jpg" alt="ベーコンとアボカドのピザ（トマトソース）" />
</a>
</div><!-- #gallery1 -->
<div id="gallery2">
<h2>例2：jQuery使用（アニメーション）</h2>
<a href="http://www.flickr.com/photos/22559849@N06/3142429603/">
<img src="http://farm4.static.flickr.com/3214/3142429603_3b4ddd96a9_m.jpg" alt="イルミネーション@サザンテラス" />
</a>
<a href="http://www.flickr.com/photos/22559849@N06/3143248598/">
<img src="http://farm4.static.flickr.com/3089/3143248598_018daa38eb_m.jpg" alt="イルミネーション@サザンテラス" />
</a>
<a href="http://www.flickr.com/photos/22559849@N06/3142386073/">
<img src="http://farm4.static.flickr.com/3244/3142386073_87c62671a5_m.jpg" alt="イルミネーション@サザンテラス" />
</a>
</div><!-- #gallery2 -->
<!-- / CODE -->
</div>
</body>
</html>
例：ドロップダウンメニュー
参照：jQuery & CSS Example - Dropdown Menu
jQueryとCSSでリストをドロップダウンメニューにします。
hoverの使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>イベント操作：相互作用：hoverの使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('li.headlink').hover(
function() { $('ul', this).css('display', 'block'); },
function() { $('ul', this).css('display', 'none'); });
});
</script>
<style type="text/css">
#cssdropdown { height:20em; }
#cssdropdown * { list-style:none; margin:0; padding:0; }
#cssdropdown a { color:#eee; text-decoration:none; font-weight:bold; }
#cssdropdown li.headlink { width:220px; float:left; margin:10px 0 10px 1px; padding:5px 0 0 0; background:#000 url("/content/img/ajax/line_top.png") repeat-x 0 0; text-align:center; }
#cssdropdown li.headlink a { display:block; padding:15px; }
#cssdropdown li.headlink ul { background:#000 url("/content/img/ajax/line_btm.png") repeat-x bottom left; display:none; }
#cssdropdown li.headlink ul li { border-top:1px solid #fff; text-align:left; }
#cssdropdown li.headlink ul li img { margin:0 5px 0 20px; vertical-align:middle; }
</style>
</head>
<body>
<div id="wrap">
<h1>イベント操作：相互作用：hoverの使用例 | jQuery</h1>
<h2>例：ドロップダウンメニュー</h2>
<p>参照：<a href='http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/'>jQuery & CSS Example - Dropdown Menu</a></p>
<!-- CODE -->
<ul id="cssdropdown" class="cf">
<li class="headlink">
<a href="#" onclick="return false;">検索エンジン</a>
<ul>
<li><a href="http://www.google.co.jp/"><img src="/content/img/icon/ico_google.png" />Google</a></li>
<li><a href="http://www.yahoo.co.jp/"><img src="/content/img/icon/ico_yahoo.gif" />Yahoo</a></li>
<li><a href="http://www.live.com/"><img src="/content/img/icon/ico_msn.gif" />Live Search</a></li>
</ul>
</li>
<li class="headlink">
<a href="#" onclick="return false;">ブラウザ</a>
<ul>
<li><a href="http://mozilla.jp/firefox/"><img src="/content/img/icon/ico_mozilla.gif" />Firefox</a></li>
<li><a href="http://www.microsoft.com/japan/windows/products/winfamily/ie/default.mspx"><img src="/content/img/icon/ico_ie7.gif" />Internet Explorer</a></li>
<li><a href="http://www.apple.com/jp/safari/"><img src="/content/img/icon/ico_safari.gif" />Safari</a></li>
<li><a href="http://www.fenrir.co.jp/sleipnir/"><img src="/content/img/icon/ico_sleipnir.png" />Sleipnir</a></li>
</ul>
</li>
</ul>
<!-- / CODE -->
</div>
</body>
</html>
例：サムネイル→原寸大表示
サムネイルにマウスオーバーすると、最前面にレイヤー表示し、クリックするとサイドに原寸大画像をキャプション付きで表示する方法が掲載されています。
参照：Fancy Thumbnail Hover Effect w/ jQuery
jQueryとCSSでリストをドロップダウンメニューにします。
hoverの使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>イベント操作：相互作用：hoverの使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
/* 原寸大画像表示 */
$("ul.thumb li").hover(function() {
$(this).css({'z-index' :'10'});
$(this).find('img').addClass("hover").stop()
.animate({
marginTop:'-110px',
marginLeft:'-110px',
top:'50%',
left:'50%',
width:'174px',
height:'174px',
padding:'20px'
}, 200);
} , function() {
$(this).css({'z-index' :'0'});
$(this).find('img').removeClass("hover").stop()
.animate({
marginTop:'0',
marginLeft:'0',
top:'0',
left:'0',
width:'100px',
height:'100px',
padding:'5px'
}, 400);
});
/* クリックしたリンクのhref属性の値をimt要素のsrc属性に設定 */
$("ul.thumb li a").click(function() {
var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr({ src:mainImage });
return false;
});
});
</script>
<!-- CSS -->
<style type="text/css">
ul.thumb {
float:left;
list-style:none;
margin:0; padding:10px;
width:360px;
}
ul.thumb li {
margin:0; padding:5px;
list-style:none;
float:left;
position:relative;
width:110px; height:110px;
}
ul.thumb li img {
width:100px; height:100px;
border:1px solid #ddd;
padding:5px;
background:#f0f0f0;
position:absolute;
left:0; top:0;
-ms-interpolation-mode:bicubic;
}
ul.thumb li img.hover {
background:url("/content/img/ajax/thumb_bg.png") no-repeat center center;
border:0;
}
#main_view {
float:left;
margin:0 0 0 -10px; padding:9px 0;
}
</style>
</head>
<body>
<div id="wrap">
<h1>イベント操作：相互作用：hoverの使用例 | jQuery</h1>
<h2>例：サムネイルにマウスオーバーすると、最前面にレイヤー表示し、クリックするとサイドに原寸大画像をキャプション付きで表示。</h2>
<p>参照：<a href='http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/'>Fancy Thumbnail Hover Effect w/ jQuery</a></p>
<!-- CODE -->
<ul class="thumb">
<li><a href="http://farm4.static.flickr.com/3514/3274514408_1800118ded.jpg"><img src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_t.jpg" alt="" /></a></li>
<li><a href="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381.jpg"><img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_t.jpg" alt="" /></a></li>
<li><a href="http://farm4.static.flickr.com/3316/3273696493_570fdd0ee5.jpg"><img src="http://farm4.static.flickr.com/3316/3273696493_570fdd0ee5_t.jpg" alt="" /></a></li>
<li><a href="http://farm4.static.flickr.com/3427/3273696469_aa2aaf5e89.jpg"><img src="http://farm4.static.flickr.com/3427/3273696469_aa2aaf5e89_t.jpg" alt="" /></a></li>
<li><a href="http://farm4.static.flickr.com/3396/3274514302_10521a0a98.jpg"><img src="http://farm4.static.flickr.com/3396/3274514302_10521a0a98_t.jpg" alt="" /></a></li>
<li><a href="http://farm4.static.flickr.com/3215/3141100545_e21269fb11.jpg"><img src="http://farm4.static.flickr.com/3215/3141100545_e21269fb11_t.jpg" alt="" /></a></li>
<li><a href="http://farm4.static.flickr.com/3015/3104684027_a215663229.jpg"><img src="http://farm4.static.flickr.com/3015/3104684027_a215663229_t.jpg" alt="" /></a></li>
<li><a href="http://farm4.static.flickr.com/3033/3104683957_a8b91f3235.jpg"><img src="http://farm4.static.flickr.com/3033/3104683957_a8b91f3235_t.jpg" alt="" /></a></li>
<li><a href="http://farm4.static.flickr.com/3247/3141926720_08ebc48824.jpg"><img src="http://farm4.static.flickr.com/3247/3141926720_08ebc48824_t.jpg" alt="" /></a></li>
</ul>
<div id="main_view">
<a href="http://www.flickr.com/photos/22559849@N06/" target="_blank"><img src="http://farm4.static.flickr.com/3514/3274514408_1800118ded.jpg" alt="" /></a><br>
<small style="float: right; color: #999;">by by php_javascript_room, on Flickr</small>
</div>
<br clear="all" />
<!-- / CODE -->
</div>
</body>
</html>
toggle(fn, fn2[, fn3, fn4, ...])
クリックするたびに複数の関数を切り替え
2009/2/27
toggle(fn, fn2[, fn3[, fn4, ... ]]) 戻り値：jQuery
クリックするたびに、2つ以上の関数の呼び出しを切り替えて実行します。
マッチした要素がクリックされた時に、最初に指定した関数が実行され、もう一度クリックした時に、2番目に指定した関数が実行されます。 3回目以降のクリックは、最初に指定した関数が実行され...という風に関数がローテーションします。
要素からtoggleイベントを取り除くには、unbind()を使用します。
第1引数fnには、最初にクリックされた実行する関数を指定します。
第2引数fn2には、2回目にクリックされた実行する関数を指定します。
第3引数以降のオプション引数には、必要に応じて実行する関数を指定します。
function callback(イベントオブジェクト){ this; /* DOM要素 */ }
例：リストアイテム上でクリックするとハイライト切り替え
toggleの使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>イベント操作：相互作用：toggleの使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("li").toggle(
function(){
$(this).css({"list-style-type":"disc", "color":"blue"});
},
function(){
$(this).css({"list-style-type":"disc", "color":"red"});
},
function(){
$(this).css({"list-style-type":"", "color":""});
}
);
});
</script>
<style type="text/css">
ul { margin:10px; list-style:inside circle; font-weight:bold; }
li { cursor:pointer; }
</style>
</head>
<body>
<div id="wrap">
<h1>イベント操作：相互作用：toggleの使用例 | jQuery</h1>
<p>▼リストアイテム上でクリックするとハイライトを切り替えます。</p>
<!-- CODE -->
<ul>
<li>Go to the store</li>
<li>Pick up dinner</li>
<li>Debug crash</li>
<li>Take a jog</li>
</ul>
<!-- / CODE -->
</div>
</body>
</html>
例：クリックでテキストエリア表示・非表示切り替え
toggleの使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>イベント操作：相互作用：toggleの使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#box_show").click(function(){
$("#box").show("slow");
});
$("#box_hide").click(function(){
$("#box").hide("slow");
});
$("#box_toggle").click(function(){
$("#box").toggle("slow");
});
});
</script>
<style type="text/css">
textarea {
width:400px; height:100px;
border:1px solid red;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
</style>
</head>
<body>
<div id="wrap">
<h1>イベント操作：相互作用：toggleの使用例 | jQuery</h1>
<p>▼クリックでテキストエリアの表示・非表示を切り替えます。</p>
<!-- CODE -->
<p>
<a href="#" id="box_show">表示</a>
｜
<a href="#" id="box_hide">非表示</a>
｜
<a href="#" id="box_toggle">トグル</a>
</p>
<p>
<textarea id="box">クリックでテキストエリアの表示・非表示を切り替えます</textarea>
</p>
<!-- / CODE -->
</div>
</body>
</html>
