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

Question

我想在按钮上进行下拉菜单，但是当悬停时，效果 不适用于div或body等任何其他元素 这是代码

如果你真的想潜入search for dropbtn:hover

，这里是我的代码的链接

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

Answer 1

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

Answer 2

您的dropdown-content不是.dropbtn的孩子，因此.dropbtn:hover .dropdown-content无效。 您可以使用+选择器：

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