在HTML下拉菜单中的内容上方悬停时，更改背景和前景色
在HTML下拉菜单中的内容上方悬停时，更改背景和前景色
提问于 2018-10-04 22:32:15
这是我的代码，现在我试图改变背景和字体颜色当悬停在下拉菜单上时，我不知道在代码中该放在哪里，我不确定我是否必须在CSS或HTML代码中编辑。
这是我的HTML
<body>
<div class="dropdown">
<button class="dropbtn"><b>Some Colleges at <br>MSU</b></button>
<div class="dropdown-content">
<a href="#"><center><b>College of Math and Sciences</b></center></a>
<a href="#"><center><b>Business School</b></center></a>
<a href="#"><center><b>College of Humanities and Social Sciences</b>
</center></a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn"><b>Departments in <br>CSAM</b></button>
<div class="dropdown-content">
<a href="#"><center><b>Biology</b></center></a>
<a href="#"><center><b>Computer Scince</b></center></a>
<a href="#"><center><b>Math</b></center></a>
<a href="#"><center><b>Chemistry</b></center></a>
<a href="#"><center><b>Earth and Environment Studies</b></center></a>
</div>
</div>
</body>这是我的CSS
<style>
.dropdown-content a:hover {background-color: black; color:white;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: red;}
.dropdown-content a {
color: white;
padding: 2px 10px;
text-decoration: none;
border: 1px solid blue;
display: block;
}
.dropbtn {
background-color: red;
color: cyan;
padding: 2px;
font-size: 16px;
border: 2px solid blue;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: black;
min-width: 120px;
z-index: 1;
}
</style>回答 2
Stack Overflow用户
回答已采纳
发布于 2018-10-04 22:48:05
您有正确的代码，它只是没有明显地做任何事情，因为:hover颜色与您在其他类中设置的颜色相同。
这句话：.dropdown-content a:hover {background-color: black; color:white;}是在悬停时改变你的颜色，只是相同的事情。改变这些颜色，我想你会发现它达到了你想要的效果。
Stack Overflow用户
发布于 2018-10-05 07:19:01
下拉内容a:悬停{背景颜色:添加您的颜色；颜色:添加您的颜色；}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52656052
复制相关文章
相似问题
腾讯云开发者
