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

【问题标题】：Is there a way to react to a parent hover without knowing the parent's classname?有没有办法在不知道父类名的情况下对父悬停做出反应？
【发布时间】：2021-04-25 06:04:40
【问题描述】：

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

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

给定

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

我想要类似的css

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

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

【问题讨论】：

请添加更多详细信息，以便我们知道您的问题到底是什么。
简而言之，是的……但是。您可以创建一个更通用的选择器，并且您不一定需要父类的类名，但是您可能会创建一个效率低下的选择器，该选择器将来可能会中断，甚至包含错误的元素。这需要精心构建的选择器。
@Gil 你能举个例子吗？
看看你的例子，div:hover > .inner 会起作用，但它太宽泛了。最好添加另一个 div 父级的指示符，以使其更具体。
听起来我只是使用样式化组件的方法来嵌入父类的类名以供子类使用；希望这是可行的，但是唉

标签： css styled-components

【解决方案1】：

没有太多可以做出明确的具体选择，所以这将取决于你是否足够具体的样式。

在给定结构的情况下，有几种方法可以尝试尽可能具体：

<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) 不会选择第一个具有类内部的跨度。

【讨论】：

【解决方案2】：

这里的结果是没有办法做我描述的事情。我结束的解决方案是：

const Container = styled.div``

const Inner = style.div`
  ${Container}:hover & {
      max-width: 200px;
      transition: max-width .2s ease-in-out;
  }  
`

这个和其他解决方案都是通过类名、知道元素类型或位置等“使用父级的知识来访问它”的变体。这些都不是错误的，但不幸的是更通用的样式'如果我的父母悬停，无论那个父母是什么，做某事'目前似乎不可能

【讨论】：