3

私は css ツリー ビューを開発しています。可能であれば、子を持つ要素にのみホバー効果を維持したいと考えています。

    <ul>
      <li><span>Item 1</span>
        <ul>
          <li><span>Item 1.1</span></li>
          <li><span>Item 1.2</span></li>
          <li><span>Item 1.3</span></li>
        </ul>
      </li>
    </ul>

私がcssで行ったことは次のとおりです。

.treeview li>ul>span:hover, .treeview li>ul>span:hover+ul li span {
    background:#eee;
    border:1px solid #94a0b4;
    color:#000
}

しかし、これは私が期待したようには機能しません。

4

3 に答える 3

0

それはあなたが望むものですか？

http://jsfiddle.net/Defoncesko/p63b9/

HTML

<div class="treeview">
        <ul>
          <li><span>Item 1</span>
            <ul>
              <li><span>Item 1.1</span></li>
              <li><span>Item 1.2</span></li>
              <li><span>Item 1.3</span></li>
            </ul>
          </li>
        </ul>
</div>

CSS

  ul ul li:hover {
        background-color:#eee;
        border:1px solid #94a0b4;
        color:#000
    }
于 2013-10-23T14:49:45.830 に答える
0

これがあなたの望むものだと思います。ご覧のとおり、フィドルに別の大きなliを追加しました。

.treeview ul>li>span:hover {
    background:#eee;
    border:1px solid #94a0b4;
    color:#000
}
.treeview ul>li>span ~ ul>li>span:hover {
    background:#fff;
    border:none;
    color:#000
}

デモ: http://jsfiddle.net/QdEEf/1/

編集：実際にあなたの質問を本当に理解しているなら。が子として をli持っているかどうかを判断する方法を探しています。この場合、javascript を使用して、子があるかどうかを判断する必要があります。CSSでこれを行う方法はありませんulliul

于 2013-10-23T14:59:29.250 に答える