Можно ли изменить только альфа цвета фона RGBA при наведении курсора? - PullRequest
Новая
       49

Можно ли изменить только альфа цвета фона RGBA при наведении курсора?

88 голосов
/ 06 августа 2011

У меня есть набор <a> тегов с разными цветами фона rgba, но с той же альфа.Можно ли написать единственный стиль CSS, который изменит только непрозрачность атрибута rgba?

Быстрый пример кода: 

 <a href="#"><img src="" /><div class="brown">Link 1</div></a>
 <a href="#"><img src="" /><div class="green">Link 2</div></a>

И стили 

a {display: block; position: relative}
.brown {position: absolute; bottom: 0; background-color: rgba(118,76,41,.8);}
.green {position: absolute; bottom: 0; background-color: rgba(51,91,11,.8);}

Я хотел бы написать один стиль, который бы изменял непрозрачность при наведении <a>, но оставил бы цвет без изменений.

Что-то вроде 

a:hover .green, a:hover .brown {background-color: rgba(inherit,inherit,inherit,1);}

Ответы [ 14 ]

1 голос
/ 06 августа 2011

Обновление: К сожалению, сделать это невозможно.Вам нужно написать два отдельных селектора: 


a.green:hover {background-color: rgba(118,76,41,1);}
a.brown:hover {background-color: rgba(118,76,41,1);}

Согласно W3C, свойство rgba не имеет / не поддерживает значение inherit.

0 голосов
/ 24 июля 2018

Простой обходной путь с opacity, если вы можете приспособиться к небольшому изменению background-color: 

.yourClass {
    // Your style here //
    opacity: 0.9;
}

.yourClass:hover, .yourClass:focus {
    opacity: 0.7;
}

.yourClass:active {
    opacity: 1;
    box-shadow: none;
}

.yourClass:hover, .yourClass:focus, .yourClass:active {
    text-decoration: none;
    outline: none;
}
0 голосов
/ 28 февраля 2018

простое решение: 

a
{
    position: relative;
    display:inline-block;
    background: rgba(red, 0.75);
    padding: 20px;


   &:before
   {
     content: ' ';
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
   }

   &:hover
   {
     &:before
     {
       background-color: rgba(#000, 0.25); 
     }
   }
}

пример: https://jsfiddle.net/epwyL296/14/

просто поиграйте с альфа фоном.если вы хотите свет вместо тьмы, просто замените # 000 на # fff

0 голосов
/ 06 августа 2011

Это самый простой способ;поместите это в свою таблицу стилей CSS: 

a:hover { color : #c00; }

done!

Страница:
...