html - 悬停时 li 的背景颜色无法正常工作
问题描述
我的简单水平导航栏有一个特定问题。当我为整个 ul 设置背景颜色时,我只会在悬停时更改文本,但不会更改背景。我试图设置 li:hover 和 a:hover 但一切都是一样的。例如,当我为 background-color 属性(黑色、红色...)设置不同的颜色时,一切都很好,但是使用 rgba 值它在大于 600 像素的屏幕上不起作用。正如我所见,我想对两者都产生相同的效果,并且只设置不同的颜色会产生问题。有人可以告诉我我的错误在哪里,我该如何解决?
这是我的代码
body {
margin: 0;
padding: 0;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.item2 {
grid-area: navbar;
}
.item2 ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.item2 ul li>a {
display: block;
text-decoration: none;
text-align: center;
color: ivory;
padding: 5px;
border-bottom: 1px solid saddlebrown;
background-color: rgb(44, 33, 30);
}
.item2 li a:hover {
color: sandybrown;
background-color: rgba(44, 33, 30, 0.8);
}
@media only screen and (min-width: 600px) {
.item2 ul {
overflow: hidden;
background-color: rgb(44, 33, 30);
}
.item2 ul li {
display: inline;
float: left;
}
.item2 ul li>a {
display: inline-block;
padding: 12px;
border-right: 1px solid saddlebrown;
background-color: rgb(44, 33, 30);
}
.item2 li:hover a {
background-color: rgba(44, 33, 30, 0.8);
color: sandybrown;
}
<div class="item2">
<ul>
<li><a href="#">Biographie</a></li>
<li><a href="#">Œuvre</a></li>
<li><a href="#">L'homme politique</a></li>
<li><a href="#">Postérité</a></li>
</ul>
</div>
解决方案
如果可能,将悬停效果应用于锚标记
一:悬停{}
推荐阅读
- ios - UICollectionReusableView 中的 UIBUtton 操作
- php - Typo3 8.7.19 扩展迁移。错误:无法分析类
- mysql - 通过python脚本执行mysql查询时出错
- java - 带有条件的 SQLITE 随机值/行
- scala - 使用 play framework 管理外部 api 调用的缓存解决方案
- react-native - React-Native 中的线性渐变背景颜色
- gherkin - 在 Cucumber-Gherkins 集成测试的特征文件中并行运行示例
- elasticsearch - 弹性搜索 _count 个查询
- android - Recycler View Sqlite 数据库的问题
- csv - 使用 python 请求自动完成表单填写任务