李悬停不工作

什么春天

我想将li悬停，但是它不起作用，我之前做过并且起作用了，但是我不知道为什么现在不起作用，我为li设置了背景色，我想悬停时它会改变，还有另一个问题，我为页脚设置了不透明度，但它也影响了li背景色！

body {
  background-image: url(background.jpg);
  background-repeat: no-repeat;
}

footer {
  width: 1350px;
  height: 200px;
  background-color: dimgray;
  border-radius: 10px;
  opacity: 0.7;
  position: absolute;
}

#li1 {
  display: inline-block;
  list-style-type: none;
  margin: 2px;
  padding: 20px;
  background-color: aqua;
  width: 100px;
  font-family: Calibri;
  font-weight: 700;
}

#ul1 {
  margin-left: 50px;
  margin-top: 60px;
  position: relative;
}

a {
  text-decoration: none;
  color: black;
  display: block;
  font-size: 20px;
  text-align: center;
}

li:hover {
  background-color: chartreuse;
}

<footer>
  <ul id="ul1">
    <li id="li1"><a href="##">Home</a></li>
    <li id="li1"><a href="##">Categories</a></li>
    <li id="li1"><a href="##">languages</a></li>
    <li id="li1"><a href="##">Contries</a></li>
    <li id="li1"><a href="##">Cities</a></li>
    <li id="li1"><a href="##">Planets</a></li>
    <li id="li1"><a href="##">Seas</a></li>
    <li id="li1"><a href="##">Deserts</a></li>
  </ul>
</footer>

Mohsen Solhnia

您不能为多个元素设置相同的ID。而且我不确定如果在标签中将##设置为href，那么html会做什么？

像这样将id attr更改为li中的class attr：

Class =“ li1”

它的悬浮将起作用

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。