Как сделать затемнение background-color у обьекта в css с индивидуальным цветом?

Question

у меня есть 3 кнопки(li). у каждой из них есть свой индивидуальный цвет прописанный через style по отдельности для каждой кнопки. нужно чтобы при наведении на каждую из них она затемнялась относительно своего начального цвета.

aside>ul>li {
  padding: 2%;
  text-align: left;
  margin: 1%;
  border-radius: 15px;
  cursor: pointer;
}

aside>ul>li>a {
  display: block;
}

<aside>
  <h4>Recommended</h4>
  <ul type="none">
    <li style="background-color: rgb(214, 255, 126);"><a href="">Capybaras getting Morbed??</a></li>
    <li style="background-color: rgb(126, 208, 255);"><a href="">Capybaras getting Morbed??</a></li>
    <li style="background-color: rgb(255, 126, 190);"><a href="">Capybaras getting Morbed??</a></li>
  </ul>
</aside>

Answer 1

Лучше использовать классы, чем атрибут style. Так вы сможете переиспользовать стили для других элементов.

Для каждого цвета создадим отдельные классы и для каждого из этих классов используем псевдоселектор :hover. Так же еще можно воспользоваться свойством filter, но тогда затемнение приментися в том числе и к тексту в селекторе a.

aside > ul > li {
  padding: 2%;
  text-align: left;
  margin: 1%;
  border-radius: 15px;
  cursor: pointer;
}

/* Такой способ затемнит все внутри, в том числе и цвет текста
/* aside > ul > li:hover {
  filter: brightness(0.6);
} */

.yellow {
  background-color: rgb(214, 255, 126);
}
.yellow:hover {
  background-color: rgb(184, 225, 96);
}
.blue {
  background-color: rgb(126, 208, 255);
}
.blue:hover {
  background-color: rgb(96, 178, 225);
}
.pink {
  background-color: rgb(255, 126, 190);
}
.pink:hover {
  background-color: rgb(225, 96, 160);
}

aside > ul > li > a {
  color: #fff;
  display: block;
}

<aside>
  <h4>Recommended</h4>
  <ul type="none">
    <li class="yellow"><a href="">Capybaras getting Morbed??</a></li>
    <li class="blue"><a href="">Capybaras getting Morbed??</a></li>
    <li class="pink"><a href="">Capybaras getting Morbed??</a></li>
  </ul>
</aside>

Answer 2

Так что-ли?

aside>ul>li {
  padding: 2%;
  text-align: left;
  margin: 1%;
  border-radius: 15px;
  cursor: pointer;
}

aside>ul>li:hover {
  filter: brightness(85%);
}

aside>ul>li>a {
  display: block;
}

<aside>
  <h4>Recommended</h4>
  <ul type="none">
    <li style="background-color: rgb(214, 255, 126);"><a href="">Capybaras getting Morbed??</a></li>
    <li style="background-color: rgb(126, 208, 255);"><a href="">Capybaras getting Morbed??</a></li>
    <li style="background-color: rgb(255, 126, 190);"><a href="">Capybaras getting Morbed??</a></li>
  </ul>
</aside>

БЛОГ НА HUSL

Как сделать затемнение background-color у обьекта в css с индивидуальным цветом?

Ответы (2 шт):