3

我有一个嵌套的 UL 结构，它代表一个可以长得很深的文件夹树。我坚持为 LI 元素做一个简单的 :hover 效果。问题是做 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

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

对于悬停元素：

ul li:hover{
   "Style"
}

对于其他元素：

ul li ul li{
    "Style"
}
于 2013-06-13T12:42:07.413 回答
1

更新：我刚刚重读了您的问题，您在其中声明：

“通常我会尝试将悬停效果应用于链接元素或 LI 中的某些东西，以避免父母也采用这种风格，但由于目前的情况，这不是一个选择。”

如果这是真的，那么下面的解决方案不适合您的情况，并且您无法使用纯 CSS 实现您想要的。然而，我已经留下了我的答案，因为其他想要实现这一点但可以使用嵌套元素的人可能会发现它很有用。

纯 CSS 仅通过添加 HTML

您可以通过纯 CSS 实现您所寻求的东西的唯一方法是在 中添加一个额外的元素（如 a 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 回答
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 回答
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 回答