悬停在 CSS 上不起作用，即使在简单的测试代码中也是如此

Question

即使在简单的测试代码中，我也无法使悬停功能正常工作。这让我疯狂。此代码只是尝试在将鼠标悬停在按钮上时更改

的背景代码。我错过了什么？

<!doctype html>

<button id="dropdownmenu"></button>
<p id="test"> this is a test <p>

<style>
#test{
  background-color: red;
}
#dropdownmenu{
  height:200px;
  width:200px;
}
#dropdownmenu: hover #test{
  background-color: blue;
}
</style>

</html>

Answer 1

删除 : 和 hover 之间的空格。悬停是一个伪选择器，你应该遵守语法

Answer 2

您的问题有 2 个可能的答案：

我不是 100% 确定 <p> 应该在 <button> 内部还是外部...答案之一是将 <p> 移到内部按钮，例如：

<button id="dropdownmenu">
    <p id="test"> this is a test <p>
</button>

现在，如果您希望 <p> 位于 <button> 之外，您只需在悬停后添加一个 +，例如：

#dropdownmenu:hover + #test{
    background-color: blue;
}

Answer 3

你有两张卡，没有关联。如果你想改变 <p> 的背景颜色，你可以使用 JavaScript 来做到这一点。

<button onmouseover="changeColor()"  id="dropdownmenu">hover</button>
<p id="test"> this is a test <p>
<script>    

function changeColor() {
    let text = document.getElementById("test");
    text.style.backgroundColor = "pink";
}
</script>

<style>
#test{
  background-color: red;
}
#dropdownmenu{
  height:200px;
  width:200px;
}
</style>

</html>

悬停在 CSS 上不起作用，即使在简单的测试代码中也是如此

Hover doesn't work on CSS, even in simple test code

html

css

event-handling

hover

css-selectors