悬停效果不支持p和h1标签

Question

段：

＆＃13;

＆＃13;

#Check:hover+p,
h1 {
  color: yellow;
}

＆＃13;

<button id="Check">Test Me</button>
<p>Color will be changed to yellow</p>
<h1>Color will be changed to yellow</h1>

＆＃13;

＆＃13;

＆＃13;

你能澄清我哪里出错吗？

Answer 1

,适用于整个简单选择器。您的选择器被解析为#Check:hover + p 或 h1。

您需要在逗号后重复#Check:hover +部分。

Answer 2

您可以通过以下方式执行此操作：

＆＃13;

＆＃13;

#Check:hover+p, #Check:hover+p+h1 {
  color: yellow;
}

＆＃13;

<button id="Check">Test Me</button>
<p>Color will be changed to yellow</p>
<h1>Color will be changed to yellow</h1>

＆＃13;

＆＃13;

＆＃13;

您还需要添加#Check:hover，然后，为了找到所需的h1，您需要以其方式显示代码。如果您只是添加#Check:hover+h1，则认为它是按钮后面的第一个元素。

因此，为了做到这一点，你需要添加#Check:hover+p+h1来告诉代码路径，第一个元素+p然后第二个元素+h1

希望这有帮助