2

Можно указать a:hover, но тогда нужно будет наводить на текст.

li {
    border-radius: 15px;
    font-size: 17px;
    flex-grow: 1;
    flex-basis: 0;
    padding: 14px 10px 21px;
    transition: all 0.5s;
    text-align: center;
}
a {
    text-decoration: none;
    color: #fff;
}
ul {
    background-color: black;
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
}
li:hover {
    background: rgba(195,255,143,.5);
    font-size: 18px;
    margin-bottom: -2px;
    color: blue;
}
<ul>
    <li><a href="#">კატეგორიები</a></li>
    <li><a href="#">კონტაქტი</a></li>
    <li><a href="#">ანგარიში</a></li>
</ul>

1
  • может потому что в "li" есть еще "a" попробуй так li:hover a{color: blue;}
    – sepgg
    11 авг 2018 в 10:42

2 ответа 2

4

Добавьте цвет ссылке после наведения на li:

li {
  border-radius: 15px;
  font-size: 17px;
  flex-grow: 1;
  flex-basis: 0;
  padding: 14px 10px 21px;
  transition: all 0.5s;
  text-align: center;
}

a {
  text-decoration: none;
  color: #fff;
}

ul {
  background-color: black;
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin-bottom: 0;
  padding-left: 0;
}

li:hover {
  background: rgba(195, 255, 143, .5);
  font-size: 18px;
  margin-bottom: -2px;
}

li:hover a {
  color: blue
}
<ul>
  <li><a href="#">კატეგორიები</a></li>
  <li><a href="#">კონტაქტი</a></li>
  <li><a href="#">ანგარიში</a></li>
</ul>

3
li:hover a { /* такой записью ты выбираешь дочерний элемент `a` родителя `li` при наведении на него, стили будут применяться к нему */
  CODE...
}

изучи отношения в css, такие штуки нередко будут встречаться, а учить 15 минут.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки