反应悬停/活动/焦点样式css选择器不适用于封闭元素答案

【问题标题】：React hover/active/focus style css selector not working for enclosed element反应悬停/活动/焦点样式css选择器不适用于封闭元素
【发布时间】：2017-07-24 05:38:36
【问题描述】：

我想在按钮悬停时制作一个下拉菜单，但是当悬停时，效果不适用于任何其他元素，例如 div 或 body。
这是代码

如果你真的想深入了解search for dropbtn:hover ，这里是我的代码链接

.dropbtn:hover .dropdown-content {
  background: green ; //tried !important also not working
  display:block;
 }

【问题讨论】：

要将样式应用于.dropbtn:hover AND 到.dropdown-content，您应该用逗号分隔它们：.dropbtn:hover, .dropdown-content {...}
我想更改 .dropdown-content 、背景和显示。悬停时 .dropbtn

标签： css reactjs

【解决方案1】：

您的dropdown-content 不是您的.dropbtn 的子代，因此.dropbtn:hover .dropdown-content 将不起作用。你可以使用+ 选择器：

&:hover {
  & + .dropdown-content{
     background: green;
     display:block;
  }

【讨论】：

【解决方案2】：

选择器不好，.dropbtn:hover .dropdown-content，意味着你的.dropdown-content应该包含在.dropbtn中，在HTML中它们是相邻的。您应该更改 HTML 以使 .dropdown-content 成为 .dropbtn 的子级，或者您可以将选择器更改为 .dropbtn:hover + .dropdown-content

【讨论】：