Question

我有一个嵌套的UL结构，它代表了一个可以变得非常深的文件夹树。我坚持做一个简单的：LI元素的悬停效果。问题是做li：hover不会起作用，因为它影响所有父“li”。通常我会尝试将悬停效果应用于链接元素或LI中的某些内容，以避免父母也采用这种风格，但由于现在情况不是一种选择。我有一个工作的解决方案，通过使用javascript在一个悬停的LI上放置一个类，然后设置这个类的样式，但我真的很有兴趣看看是否真的有一种方法通过纯css实现这一点。

我想可能有一种方法可以做一个非常“硬编码”的CSS解决方案，但我对动态和干净的解决方案更感兴趣，因为结构可以无限期地嵌套。

也许有一些我不知道的伪选择器？请注意，它不必是IE＆lt; 8 compatible

<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>

Answer 1

如果你想使用纯CSS，那么你需要我们的父，子，元素。

对于悬停元素：

ul li:hover{
   "Style"
}

对于其他元素：

ul li ul li{
    "Style"
}

Answer 2

更新：我刚刚重新阅读了您提出的问题：

“通常我会尝试将悬停效果应用于链接 LI中的元素或东西，以避免父母将风格视为好吧，但由于现在不是一种选择的情况。“

如果这是真的，那么下面的解决方案对于您的环境是不可行的，并且您无法通过纯CSS实现您的期望。然而，我已经离开了我的答案，因为其他想要实现此目的但可以使用嵌套元素的人可能会发现它很有用。

纯CSS仅通过添加HTML

您可以通过纯CSS实现某些功能的唯一方法是在span中添加一个额外的元素（如li）并在其上执行悬停。我假设无论文件夹是什么，只有你想要突出显示的文件夹。如果是，this fiddle illustrates what I am saying，请使用以下代码：

<强> 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;
}

现在，如果您希望子文件夹在父文件夹悬停时突出显示，则perhaps this fiddle illustrates what you want会更改此代码：

<强> CSS

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

他们的关键点是利用额外的元素来控制悬停，无论是项目本身还是悬停应该影响的任何后期生成元素。

Answer 3

根本不清楚......但是如果你想在嵌套父LI时设置嵌套LI的样式而不设置父母的样式......

试试这个：

CSS

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

小提琴示例：http://jsfiddle.net/EHp3n/

Answer 4

你的问题不是很清楚，而且会让人感到困惑。让我解释一下，当用户悬停在城市（印度/中国/英国）时，应该通过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>

设置动态嵌套UL结构的样式

4 个答案:

纯CSS仅通过添加HTML

CSS