スタイルli親子の子li：ホバー

Question

私は一日中子供のli要素をホバリングするときに親のliをスタイルする方法を見つけるために掘り出してきました。

<ul> 
<li> Parent Element </li> 
    <ul> 
    <li> Child Element </li> 
    </ul> 
<ul> 

私はそれは不可能です見つけるために、CSSでそれを行う方法を求めて無数の記事を見つけました。人々は "あなたはJavascriptでそれをすることができる"と言うが、決して言わない！

私は若干のJavascript newbですので、いくつかの助けに感謝するでしょう。

ありがとうございました。

編集：ここに出力されるソースコードを示します。私はそれがJavascript/jQueryに必要なセレクタに影響するかどうかはわかりませんが、あなたが見ることができるように、既にクラス名の上にあるクラス名、つまり "page-item-9" "）。これはWordpressによって追加されましたが、私はCSSでそれを参照するために "page_item"を使うだけでした。

<ul class="pagenav"> 

    <li class="page_item page-item-12 current_page_item"><a href="#" title="Home">Home</a></li> 
    <li class="page_item page-item-2"><a href="#" title="About">About</a></li> 
    <li class="page_item page-item-4"><a href="#" title="Corporate">Corporate</a></li> 
    <li class="page_item page-item-5"><a href="#" title="Fashion, Hair &amp; Beauty">Fashion, Hair &#038; Beauty</a></li> 

    <li class="page_item page-item-6"><a href="#" title="Live Music">Live Music</a> 

     <ul class='children'> 
     <li class="page_item page-item-11"><a href="#" title="Music 1">Music 1</a></li> 
     </ul> 

    </li> 

    <li class="page_item page-item-7"><a href="#" title="Weddings">Weddings</a> 

     <ul class='children'> 
     <li class="page_item page-item-10"><a href="#" title="Wedding 1">Wedding 1</a></li> 
     </ul> 

    </li> 

    <li class="page_item page-item-8"><a href="#" title="Miscellaneous">Miscellaneous</a></li> 
    <li class="page_item page-item-9"><a href="#" title="Contact">Contact</a></li> 

    </ul> 

EDIT 2：

ここでは、私は与えられたアドバイスを使用して、私のheader.phpのファイル内に持っているものです。

<style type="text/css"> 
.highlighted { background:#000; } 
</style> 


<script type="text/javascript"> 
$(function() { 
    $('.page_item .page_item').mouseenter(function() { 
     $(this).closest('.page_item').addClass('highlighted'); 
    }).mouseleave(function() { 
     $(this).closest('.page_item').removeClass('highlighted'); 
    }); 
}); 
</script> 

もしそれが間違っていなければ、それはWordpressの問題でなければなりません。このコードは、迷惑なWordpress階層なしで正常に動作します。

Answer 1

のjavascript：

<!-- add the following line only if you are not already using jQuery: --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $('.page_item .page_item').mouseenter(function() { 
     $(this).parent().closest('.page_item').addClass('highlighted'); 
    }).mouseleave(function() { 
     $(this).parent().closest('.page_item').removeClass('highlighted'); 
    }); 
</script> 

マウスが子供<li>要素の一つに入ったときにこれが何を行うことは、これは親<li>にhighlightedクラスを追加していること。マウスが離れると、クラスが削除されます。だから、ちょうど今highlightedクラスを作成する必要があります:)

$(this).closest('.page_item')はちょうど.page_itemセレクタ（page_itemクラスを持つので、最も近い親）に一致する最も近い親要素を検索します。

Answer 2

正しいクラスが要素に適用されていることを確認した場合、私はあなたのスタイルを十分に指定していないと確信しています。あなたが設定したいスタイルのulとliの親を含めてできるだけ遠くまで指定してください。これは、Wordpressがこれらのスタイルにこのような長い（迷惑な）imo階層を使用しているからです。