Ли Ховер не работает
Я хочу навести 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>Добавление background-color: aqua; в ваш селектор #li1 отменяет любые изменения, которые вы вносите в элемент li. ID имеет приоритет над элементом.
спасибо, я нашел свою ошибку
Ответы 3
Это связано с приоритетом CSS. Вы даете всем своим спискам одинаковый идентификатор - плохая идея. Вместо этого сделайте его классом или (как я сделал в этом фрагменте) не дайте им ни класса, ни идентификатора, ни стиля, используя "# ul1 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;
}
#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>да, ошибка заключалась в установке одного и того же идентификатора для всех li, я заменил класс, и теперь он работает нормально
Использовать
li:hover {
background-color: chartreuse !important;
}
Чтобы отвергнуть ваш
background-color: aqua;
спасибо, сработало но в чем причина? Я делал это раньше так же, и это просто сработало
@NimaBahar Это потому, что CSS имеет приоритет, вы устанавливаете цвет фона перед наведением курсора, поэтому вам нужно "принудительно" изменить с помощью !important, чтобы он переопределил ваш предыдущий фон. (Примите мой ответ, если это вам поможет)
спасибо @DessaugesAntoine, ваше решение тоже возможно, но ошибка заключалась в установке одного и того же идентификатора для всех li, и она решена, в любом случае спасибо.
Вы не можете установить одинаковый идентификатор для нескольких элементов. И я не уверен, что делает html, если вы установите ## как href в теге
Измените id attr на class attr в li следующим образом:
Class = "li1"
Его наведение будет работать
спасибо большое, я действительно новичок. Я забыл, что id должен быть уникальным :))
Примечание: идентификаторы должен должны быть уникальными