html – 改变悬停在不同li上的背景颜色

概述我让我的导航栏很好地工作但我需要在每个元素的背景中有不同的颜色. 我尝试给他们ID并在CSS中使用它,但它不起作用. “信息日”应该是耐火砖(红色),但“路线”和“位置”应该是两种不同的颜色. 任何人都可以帮助我吗？ .menuUl { list-style-type: none; margin: 0; padding: 0; overflow: hidden; border- 我让我的导航栏很好地工作但我需要在每个元素的背景中有不同的颜色.
我尝试给他们ID并在CSS中使用它,但它不起作用.
“信息日”应该是耐火砖(红色),但“路线”和“位置”应该是两种不同的颜色.
任何人都可以帮助我吗？

.menuul {  List-style-type: none;  margin: 0;  padding: 0;  overflow: hIDden;  border-left: none;  border-right: none;}.menuli {  float: left;  border: none;}li a {  display: block;  color: white;  text-align: center;  padding: 14px 16px;  text-decoration: none;}li a:hover {  background-color: firebrick;  border-radius: 5px;}

<ul >  <li  ID="courses"><a  href="EindOpdracht.HTML">COURSES</a>  </li>  <li  ID="infoDay"><a href="">INFO DAY</a>  </li>  <li  ID="locations"><a href="Location.HTML">LOCATIONS</a>  </li></ul>

解决方法 我在片段演示中更改了字体颜色的可见性,但主要的想法就是使用它们像li#infoDay a：hover.它特定于ID并改变它们的顺序不会影响CSS

.menuul{    List-style-type: none;    margin: 0;    padding: 0;    overflow: hIDden;    border-left: none;    border-right: none;}.menuli{    float: left;    border: none;}li a {    display: block;    color: black;    text-align: center;    padding: 14px 16px;    text-decoration: none;}li a:hover {        border-radius: 5px;}li#courses a:hover{  background-color: blue;}li#locations a:hover{  background-color: green;}li#infoDay a:hover{  background-color: firebrick;}

<div>  <ul >    <li  ID="courses"><a  href="EindOpdracht.HTML">COURSES</a></li>    <li  ID="infoDay"><a href="">INFO DAY</a></li>    <li  ID="locations"><a href="Location.HTML">LOCATIONS</a></li></ul>  </div>

总结

以上是内存溢出为你收集整理的html – 改变悬停在不同li上的背景颜色全部内容，希望文章能够帮你解决html – 改变悬停在不同li上的背景颜色所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。