マウスオーバーしたclassの子要素のみを表示・非表示する方法



同じclass名を使用した複数ボックスエリア内にて、
マウスオーバーしたボックスのclassの子要素(デフォルトでは非表示)のみを
表示させたくやってみました。

1.CSSの記述

<style type="text/css">
<!--
.clBox{
	border:solid 1px #333333;
	width:150px;
	height:150px;
	text-align:center;
	font-size:18px;
	cursor:pointer;
	float:left;
	margin-left:20px;
}
.clKo01{
	padding:30px 0 15px 0;
	font-size:12px;
	line-height:1.4em;
}
.clKo02{
	padding:15px 0 0 0;
	font-size:12px;
	line-height:1.4em;
	display:none;
	border-top:solid 1px #333333;
}
-->
</style>



2.読込むJs

jqueryのjsファイルのみです。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>



3.HTMLの記述例

ボックスエリア(clBox)のdivタグのonmouseover・onmouseoutにjqueryを直接記述し、
$(this).find~でやってみるとできました。

	<div class="clBox" onmouseover="$(this).find('.clKo02').css('display', 'block');" onmouseout="$(this).find('.clKo02').css('display', 'none');">
    	<div class="clKo01">子要素1<br />デフォルトから表示</div>
    	<div class="clKo02">子要素2<br />デフォルトは非表示</div>
    </div><!--/clBox-->

	<div class="clBox" onmouseover="$(this).find('.clKo02').css('display', 'block');" onmouseout="$(this).find('.clKo02').css('display', 'none');">
    	<div class="clKo01">子要素1<br />デフォルトから表示</div>
    	<div class="clKo02">子要素2<br />デフォルトは非表示</div>
    </div><!--/clBox-->

	<div class="clBox" onmouseover="$(this).find('.clKo02').css('display', 'block');" onmouseout="$(this).find('.clKo02').css('display', 'none');">
    	<div class="clKo01">子要素1<br />デフォルトから表示</div>
    	<div class="clKo02">子要素2<br />デフォルトは非表示</div>
    </div><!--/clBox-->

マウスオーバーしたclassの子要素のみを表示・非表示するデモページ

選択した要素内のみで何かやりたい時ってたまにありまして、
最終的にユニークなidをふったりして対応したりするのですが、
今回は何とか効率化出来ないかチャレンジしてみました。
(これで効率化出来ているのか不安ですが)