1

Как избавиться от затемнения текста.

a {
    text-decoration: none;
    color: #fff;
}
li {
    border-radius: 15px;
    font-size: 17px;
    flex-grow: 1;
    flex-basis: 0;
    padding: 14px 10px 21px;
    transition: all 0.5s;
    text-align: center;
}
ul {
    background-color: black;
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
}
li:hover {
    background: #cfffa5;
    opacity: 0.5;
    /*color: #75ce66;*/
    font-size: 18px;
    margin-bottom: -2px;
}
                

1
  • 1
    Он не затемняется, а становится полупрозрачным.
    – avocado03
    11 авг 2018 в 9:29

2 ответа 2

3

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

1
  • 2
    ну так я альфу в rgba задал)
    – midia
    11 авг 2018 в 9:36
3

Используйте в место свойства opacity который изначальное задает прозрачность вашему фону и тексту, возможности свойства background, который предоставляет возможность задать цвет и прозрачность только фону.

li:hover { 
background: rgba(195,255,143,.5);
/*background: #cfffa5;*/
/*opacity: 0.5;*/
/*color: #75ce66;*/
font-size: 18px;
margin-bottom: -2px; 
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.