3

非常に深くなる可能性のあるフォルダ ツリーを表すネストされた UL 構造があります。私は単純な :hover を LI 要素に適用することに行き詰まっています。問題は、li:hover を実行しても、すべての親の "li" にも影響するため機能しないことです。通常、ホバー効果をリンク要素または LI の何かに適用して、親がスタイルを取得するのを回避しようとしますが、状況により、現在はオプションではありません。javascript を使用してホバーした LI にクラスを配置し、代わりにこのクラスのスタイルを設定するという実用的なソリューションがありますが、純粋な css を介してこれを実現する方法が実際にあるかどうかを知りたいと思っています。

非常に「ハードコードされた」CSSソリューションを実行する方法があるかもしれないと思いますが、構造は無期限にネストできるため、動的でクリーンなソリューションにもっと興味があります。

たぶん、私が気付いていない疑似セレクターがありますか？IE<8互換である必要はないことに注意してください

<ul>
    <li>
        This LI should not recieve the hover effect
        <ul>
            <li>
                A li:hover will place the effect on this LI, 
                but also the parent LI, since that element is
                also techincally being hovered.
            </li>
        </ul>
    </li>
</ul>
4

4 に答える 4

1

更新：私はあなたの質問を読み直しました：

「通常は、ホバー効果をリンク要素または LI の何かに適用して、親がスタイルを取得するのを回避しようとしますが、状況により、現在はオプションではありません。」

そうであれば、以下の解決策はあなたの状況では実行可能ではなく、純粋な CSS で望むものを達成することはできません。ただし、これを達成したいが、ネストされた要素を使用できる他の人が役立つ可能性があるため、回答を残しました。

HTMLを追加するだけの純粋なCSS

純粋な CSS で求めるものを実現できる可能性がある唯一の方法は、span内に余分な要素 ( など)を追加しli、その上でホバーを実行することです。ホバリングされているフォルダーが何であれ、そのフォルダーだけが強調表示されると思います。もしそうなら、このフィドルは、このコードを使用して、私が言っていることを示しています:

HTML

<ul>
    <li>
        <span>Folder 1</span>
        <ul>
            <li>
                <span>Folder 1.1</span>
                <ul>
                    <li>
                        <span>Folder 1.1.1</span>
                        <ul>
                            <li>
                                <span>Folder 1.1.1.1</span>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS

li span:hover {
    color: red;
    background-color: yellow;
}

ここで、親フォルダーのホバー時に子フォルダーも強調表示する場合、おそらくこのフィドルは、このコード変更で何が必要かを示しています。

CSS

li span:hover,
li span:hover + ul span {
    color: red;
    background-color: yellow;
}

彼らの重要なポイントは、追加の要素を利用してホバーを制御することです。これは、アイテム自体であろうと、ホバーが影響を与える後続の要素であろうとです。

于 2013-06-13T14:42:32.460 に答える
1

純粋な CSS を使用する場合は、親要素、子要素、要素が必要になります。

ホバー要素の場合:

ul li:hover{
   "Style"
}

他の要素の場合:

ul li ul li{
    "Style"
}
于 2013-06-13T12:42:07.413 に答える
0

あなたの質問はあまり明確ではなく、混乱するでしょう。ユーザーが都市 (インド/中国/英国) にカーソルを合わせると、CSS を使用して州と国にスタイルを適用する必要があります。

<ul>
  <li>India (Apply Style)
    <ul>
      <li>India State (Apply Style)
        <ul>
          <li>India City (On Hover)</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>China
    <ul>
      <li>China State
        <ul>
          <li>China City</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>United Kingdom
    <ul>
      <li>UK State
        <ul>
          <li>UK City</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
于 2013-06-13T10:26:20.830 に答える
0

まったく明確ではありません...しかし、親のスタイルを設定せずLIに親をホバリングしたときにネストされたスタイルを設定したい場合...LI

これを試して：

CSS

ul li ul li {
    color: blue
}
ul li:hover ul li {
    color: red
}

フィドルの例: http://jsfiddle.net/EHp3n/

于 2013-06-13T09:20:57.177 に答える