我不能得到悬停功能的工作，即使在一个简单的测试代码。快把我逼疯了。这段代码只是试图改变一个
的背景代码，当鼠标悬停在一个按钮。我错过了什么?
<!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>
去掉:和hover之间的空格。Hover是一个伪选择器，你应该遵守语法
你的问题有两种可能的答案:
- 我不能100%确定
<p>是否应该在<button>内部或外部…其中一个答案是将<p>移动到按钮内部，如:
<button id="dropdownmenu">
<p id="test"> this is a test <p>
</button>
- 现在，如果你想让
<p>在<button>之外，你可以简单地在悬停后添加一个+，如:
#dropdownmenu:hover + #test{
background-color: blue;
}
你有两张牌，它们不相关。如果你想改变<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>