[JS]複数のパネルの一つだけ内容を変更してハイライトさせるスクリプト -Hoverpanels

複数のパネルを配置したコンテンツの一つにパネルにマウスをホバーすると、内容を変更しハイライト表示にするjQueryのプラグインを紹介します。

New jQuery Plugin: jQuery Hoverpanels
デモページ

[ad#ad-2]

パネルの通常時の表示は、こんな感じです。

デモページ：通常時

マウスをホバーすると、そのパネルをハイライト表示にします。
また、そのパネルだけ内容が変更されます。

デモページ：ホバー時

Hoverpanelsの実装

HTML

各パネルはdiv要素（class="hover-panel"）で実装されており、通常時用とホバー時用のコンテンツをそれぞれ配置します。
※通常時用：.default、ホバー時用：.hover

	<section class="clearfix">
		<div class="hover-panel topLeft">
			<h3>Test</h3>
			<div class="default">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet felis dolor, et porttitor sapien. Vestibulum leo velit, bibendum auctor commodo sed, fermentum a eros. In at lorem a ante faucibus luctus. Sed dapibus volutpat neque, et facilisis mauris.</p>
			</div>
			<div class="hover">
				<ul>
					<li><a href="#">Test Link 1</a></li>
					<li><a href="#">Test Link 2</a></li>
					<li><a href="#">Test Link 3</a></li>
					<li><a href="#">Test Link 4</a></li>
				</ul>
			</div>
		</div>
		<div class="hover-panel"></div>
		<div class="hover-panel"></div>
		...
	</section>

[ad#ad-2]

外部ファイル

「jquery.jsと当スクリプトを外部ファイルに指定します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="js/jquery.hoverpanels.js"></script>

スクリプトのオプション

スクリプトのオプションでは、通常時とホバー時に表示するコンテンツのclass名を指定することができます。
また、パネルのフェードの案配も調整できます。

    var settings = {
	  'default_content'  	: '.default',
	  'hover_content'    	: '.hover',
	  'fade_level'    		: '0.5',
	  'touch_injectHTML'	: '<p class="more_info">Tap for more info</p>'
    };