li Hover is not working

Question

I want to hover the li but it is not working, I did this before and it worked but I don't know why it is not working now I set background color for li, I want to when it is hover it change and another question, I set opacity for footer but it affected li background color too!

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>

Adding `background-color: aqua;` to your `#li1` selector is overriding any changes you make to the li element. ID takes precedence over element. — Chase Ingebritson, Jun 04 '18 at 14:42

score 0 · Answer 1 · answered Jun 04 '18 at 14:41

It's to do with how css is prioritised. You give all your lis the same id - bad idea. Make it a class instead, or (as I have done in the snippet), give them neither a class or id, and style using "#ul1 li".

You'll see in the snippet below the hover works:

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

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

yeah the mistake was from setting same id to all li, I replaced with class and now it works just fine — Nima Bahar, Jun 04 '18 at 14:53

score 0 · Answer 2 · answered Jun 04 '18 at 14:41

0

Use

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

To override your

background-color: aqua;

answered Jun 04 '18 at 14:41

Dessauges Antoine

508
3
25

thank you, it worked but what is the reason? I did this before the same way and it just worked – Nima Bahar Jun 04 '18 at 14:45
@NimaBahar It's because CSS is prioritised you set the background to aqua before the hover so you need to "force" the change with the `!important` to make it override your previous background. (Please accept my answer if this help you) – Dessauges Antoine Jun 04 '18 at 14:47
thank you @DessaugesAntoine your solution is possible too but the mistake was from setting same id to all li and it solved, anyway thank you. – Nima Bahar Jun 04 '18 at 14:55

score 0 · Accepted Answer · answered Jun 04 '18 at 14:43

0

You cant set same id for multi elements. And im not sure what html do if you set ## as href in tag

Change id attr to class attr in li like this:

Class="li1"

Its hover will work

answered Jun 04 '18 at 14:43

mohsen solhnia

316
2
14

thank you very much, I'm really beginner. I forgot that id must be unique :)) – Nima Bahar Jun 04 '18 at 14:50

li Hover is not working

3 Answers3