[解決済み] 親要素がホバーされたときに子要素のCSSを変更する

質問

まず、これはCSS3では複雑すぎると思っているのですが、どこかに解決策があるのなら、代わりにそちらを使いたいのですが。

HTMLはかなりわかりやすいですね。

<div class="parent">
    <div class="child">
        Text Block 1
    </div>
</div>

<div class="parent">
    <div class="child">
        Text Block 2
    </div>
</div>

子 div はデフォルトでは display:none; に設定されていますが、親 div の上にマウスを置くと display:block; に変わります。問題は、このマークアップがサイトの複数の場所に表示されることで、マウスが親の上にある場合にのみ子を表示し、他の親（すべて同じクラス名で ID がない）の上にある場合は表示させないようにしたいのです。

を使ってみました。 $(this) と .children() を使用しましたが、無駄でした。

$('.parent').hover(function(){
            $(this).children('.child').css("display","block");
        }, function() {
            $(this).children('.child').css("display","none");
        });

解決方法は？

なぜCSSを使わないの？

.parent:hover .child, .parent.hover .child { display: block; }

で、:hover を正しくサポートしていない IE6 用の JS を追加します (たとえば条件付きコメントの中)。

jQuery('.parent').hover(function () {
    jQuery(this).addClass('hover');
}, function () {
    jQuery(this).removeClass('hover');
});

以下、簡単な例です。 フィドル