时间戳

首页 > 解决方案 > 有没有办法在不知道父类名的情况下对父悬停做出反应？

css - 有没有办法在不知道父类名的情况下对父悬停做出反应？

问题描述

这是在样式组件中，但我认为这个问题作为一个简单的 css 问题可以正常工作。

当父级悬停时，有什么方法可以添加样式吗？我以前见过这个问题，但通常希望你有父母的课程。有没有办法在不了解普通 CSS 中的父级的情况下做到这一点？在样式化的组件中有这样的方法吗？

所以给定

<div>
  <span class="inner">Hello world</span>
<div>

我想要css

.inner {
  :parent:hover {
    background-color: blue;
  }
}

'parent' 试图引用一个没有已知类的元素。

标签： cssstyled-components

解决方案

没有太多可以做出明确的具体选择，因此它将取决于样式的其余部分是否足够具体。

考虑到结构，有几种方法可以尝试尽可能具体：

<div>
  <span class="inner">Hello world</span>
<div>

使用哪个取决于您最有信心的结构的哪一部分定义了您想要定位的元素 - 类或位置。

div:hover > span.inner

或者

div:hover > span:nth-of-type(1)

将两者结合起来可能是您想要的（我从问题中不确定），但目前 CSS 无法做到这一点，即span.inner:nth-of-type(1)不选择第一个具有类内部的跨度。

推荐阅读