子アイテムを強調表示せずにリストアイテムを動的に強調表示

Question

同様の質問がされているようですが、私がしようとしているものにはあまり適合しません。

キーボードアクセス可能なツリーウィジェットを作成しています。どちらのリスト項目を選択しても、背景色が適用されているはずですが、その背景色をその子要素に適用しないようにします。これはどうすればいいですか？ここに私が今いるもの：

// javascript 
$(rootLi).focus(function(event) { 
    $(this).addClass('focusNode'); 
}); 

// css 
.focusNode { 
    background-color: orange; 
} 

しかし、すべての子供はオレンジです。また、liの表示テキストを含むspanに背景色を適用しようとしましたが、それを行うと、ネストされたツリー内のすべてのspan要素も強調表示されます。

私は私のCSSでかなり弱いと認めます。誰かに助言することはできますか？ありがとう！

編集

私はHTMLを投稿するように求めてきました。私は私の問題はかなり簡単だと思うが、私はそれを傷つけることはできません:)私は推測することしかできませんコードなし

<div id="treewidget"> 
    <ul role="tree" aria-activedescendant="rootItem" tabindex="0"> 
     <li id="rootItem" tabindex="0" role="treeItem" data-id="1" aria-expanded="true" 
     aria-labelledby="contentFor1"> 
     <a href="javascript:void(0);" class="expanded"></a> <span id= 
     "contentFor1">foo</span> 

     <ul role="group"> 
      <li tabindex="0" role="treeItem" data-id="2" aria-expanded="true" 
      aria-labelledby="contentFor2"><a href="javascript:void(0);" class= 
      "expanded"></a><span id="contentFor2">bar</span></li> 

      <li tabindex="0" role="treeItem" data-id="3" aria-expanded="true" 
      aria-labelledby="contentFor3"><a href="javascript:void(0);" class= 
      "expanded"></a><span id="contentFor3">baz</span></li> 
     </ul> 
     </li> 
    </ul> 
    </div> 

Answer 1

これはjQueryを使って問題よりも多くのCSSルールであることhttp://jsfiddle.net/uFaUS/2/

に簡略化フィドルで、焦点ノードは包みますサブアイテム。

Answer 2

推測するが、それはあなたが背景が指定されていないハイライトしたいliの子供のように見えます、その背景は実際には透明です。ここで

// css 
.focusNode ul { 
    background-color: white; // original color 
} 

を動作するはずサブツリー上のBGの色をリセット

が

Answer 3

最初の子スパンタグにクラスを追加しようとしましたか？

$(this).children("span").first().addClass("focusNode");