Question

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

＆＃13;

AppRegistry.registerComponent('talar', () => App);

＆＃13;

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;
}

＆＃13;

Answer 1

如何优先考虑css。你给所有你的同一个id - 坏主意。把它变成一个类，或者（就像我在代码片段中所做的那样），不给它们一个类或id，使用＆＃34;＃ul1 li＆＃34;。

您将在下面的代码段中看到悬停工作：

＆＃13;

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;
    }
    #ul1 li{
        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;


    }
    #ul1 li:hover{
        background-color:chartreuse;
    }

＆＃13;

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

＆＃13;

Answer 2

使用

li:hover {
  background-color: chartreuse !important;
}

覆盖

background-color: aqua;

Answer 3

您无法为多个元素设置相同的ID。如果你在标签

中设置##作为href，我不确定html会做什么

将id attr更改为li中的类attr，如下所示：

类=＆＃34; LI1＆＃34;

它的悬停将起作用

李哈弗不工作

3 个答案: