在父伪元素 (::after/::before) 上更改 css 悬停 CSS

Question

这里是 fiddle 我尝试过的和我想做的事情：

#child {color:white;}
#parent::after{
  content:"This";
  color:black;
}
#parent::after:hover + #child{
  color:black; 
}
#parent::after:hover ~ #child{
  color:black;
}

<div id='parent'>
    <span>Change child color when you hover</span>
    <div id='child'>
        Color
    </div>
</div>

当我悬停 #parent 的 ::after 时，我想更改 #child 的颜色。

这可以用纯 CSS 做，还是我必须使用 js？

Answer 1

您可以那样做...对于 child 元素，您不能使用 + 或 ~ 符号。它用于非 child.

的兄弟姐妹

#child {color:white;}
#parent::after{
  content:"This";
  color:black;
}
#parent:hover #child{
  color:red; 
}
#parent:hover::after{
  color:blue;
}

<div id='parent'>
    <span>Change child color when you hover</span>
    <div id='child'>
        Color
    </div>
</div>

Answer 2

pointer-events这里可以帮到你

#child {
  color: white;
}

#parent *,
#parent{
  pointer-events: none; /* disable for parent and all childs */
}

#parent::after {
  content: "This";
  color: black;
  pointer-events: initial; /* keep it for the pseudo element */
}

#parent:hover #child { /* the pseudo element will trigger this hover */
  color: black;
}

<div id='parent'>
  <span>Change child color when you hover</span>
  <div id='child'>
    Color
  </div>
</div>

在父伪元素 (::after/::before) 上更改 css 悬停 CSS

Change css of child on parent's pseudo-element (::after/::before) hover with CSS

css

css-selectors

hover

pseudo-element