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

У меня есть набор <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);}

Теперь это возможно с помощью настраиваемых свойств:

.brown { --rgb: 118, 76, 41; }
.green { --rgb: 51, 91, 11; }

a { display: block; position: relative; }
div { position: absolute; bottom: 0; background-color: rgba(var(--rgb), 0.8); }
a:hover div { background-color: rgba(var(--rgb), 1); }

Чтобы понять, как это работает, см. Как применить непрозрачность к переменной цвета CSS?

Если настраиваемые свойства недоступны, см. Исходный ответ ниже.

К сожалению, нет, вам придется снова указать значения красного, зеленого и синего цветов для каждого отдельного класса:

a { display: block; position: relative; }

.brown { position: absolute; bottom: 0; background-color: rgba(118, 76, 41, 0.8); }
a:hover .brown { background-color: rgba(118, 76, 41, 1); }

.green { position: absolute; bottom: 0; background-color: rgba(51, 91, 11, 0.8); }
a:hover .green { background-color: rgba(51, 91, 11, 1); }

Вы можете использовать только inheritключевое слово как значение свойства, и даже в этом случае использование inheritздесь неуместно.

Вы можете делать разные вещи, чтобы избежать жесткого кодирования чисел, если хотите. Некоторые из этих методов работают, только если вы используете простой белый фон, поскольку они действительно добавляют белый цвет поверх, а не уменьшают непрозрачность. Первый должен работать нормально для всего предоставленного:

• вы еще не используете псевдоэлемент для чего-то; и
• вы можете установить positionв <div>теге относительное или абсолютное значение

Вариант 1: ::beforeпсевдоэлемент:

.before_method{
  position:relative;
}
.before_method:before{
  display:block;
  content:" ";
  position:absolute;
  z-index:-1;
  background:rgb(18, 176, 41);
  top:0;
  left:0;
  right:0;
  bottom:0;
  opacity:0.5;
}
.before_method:hover:before{
  opacity:1;
}

Вариант 2: наложение белого gif:

.image_method{
  background-color: rgb(118, 76, 41);
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/f/fc/Translucent_50_percent_white.png)
}
.image_method:hover{
  background-image:none;
}

Вариант 3: box-shadowметод:

Вариант метода gif, но может иметь проблемы с производительностью.

.shadow_method{
  background-color: rgb(18, 176, 41);
  box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.2);
}
.shadow_method:hover{
  box-shadow:none;
}

Примеры CodePen: http://codepen.io/chrisboon27/pen/ACdka

Нет, это невозможно.

Однако вы можете попробовать препроцессор CSS , если хотите делать такие вещи.

Из того, что я мог видеть, по крайней мере, LESS и Sass имеют функции, которые могут сделать цвета более или менее прозрачными.

Нет, это невозможно.

Если вы хотите использовать rgba, вы должны установить каждое значение вместе. Невозможно изменить только альфу.

Сейчас 2017 год, и теперь это возможно с

Пользовательские свойства CSS / переменные CSS ( Caniuse )

Один из классических вариантов использования переменных CSS - это возможность индивидуализировать части значения свойства.

Итак, здесь вместо того, чтобы повторять все выражение rgba еще раз - мы разделяем или "индивидуализируем" rgbaзначения на 2 части / переменные (одна для значения rgb и одна для альфа)

.brown { 
  --rgb: 118, 76, 41; 
}
.green {
  --rgb: 51, 91, 11;
}
.brown, .green {
  --alpha: 0.3;
  background-color: rgba(var(--rgb), var(--alpha));
}

Затем при наведении курсора мы можем просто изменить переменную --alpha:

a:hover .green, a:hover .brown {
  --alpha: 1;
}

a {
  display: block;
  position: relative;
}
.brown { 
  --rgb: 118, 76, 41; 
}
.green {
  --rgb: 51, 91, 11;
}
.brown, .green {
  display: inline-block;
  --alpha: 0.3;
  background-color: rgba(var(--rgb), var(--alpha));
  font-size: 40px;
  margin: 20px;
}

a:hover .green, a:hover .brown {
  --alpha: 1;
}

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

Codepen

Дальнейшее чтение:

Индивидуализация свойств CSS с помощью переменных CSS (Дэн Уилсон)

есть альтернатива, вы можете добавить фоновое изображение с линейным градиентом к исходному цвету.

a{
  background: green
}
a:hover{
  background-image:linear-gradient(hsla(0,0%,0%,.2) 100%,transparent 100%) // darker
}
a:hover{
  background-image:linear-gradient(hsla(255,100%,100%,.2) 100%,transparent 100%) // lighter
}

также, со свойством фильтра css3, вы тоже можете это сделать, но кажется, что это изменит цвет текста

a:hover{
   filter: brightness(80%) //darker
}
a:hover{
   filter: brightness(120%) //lighter
}

вот jsfiddle: https://jsfiddle.net/zhangyu911013/epwyL296/2/

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

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

Почему бы не использовать :hoverи не указать другую непрозрачность в классе зависания?

a:hover {
     opacity:0.6
}

У меня была похожая проблема. У меня было 18 разных div, работающих как кнопки, и каждый был разного цвета. Вместо того, чтобы выяснять цветовые коды для каждого или использовать селектор div: hover для изменения непрозрачности (что влияет на всех дочерних элементов), я использовал псевдокласс: раньше, как в ответе @Chris Boon.

Поскольку я хотел раскрасить отдельные элементы, я использовал: before, чтобы создать прозрачный белый div на: hover. Это очень простая промывка.

#categories div {
    position:relative;
    width:100px;
    height:100px;
    float:left;
    border:1px solid black;
    display:table-cell;
}

#categories div:before{
    content:"";
    position:absolute;
    top:0px;
    left:0px;
    width:100px;
    height:100px;
}

#categories div:hover:before {
    background-color:white;
    opacity:0.2;
}

#a_Particular_Div {
    background-color:red;
}

Согласно CanIUse.com, на начало 2014 года у него должно быть около 92% поддержки. ( Http://caniuse.com/#feat=css-gencontent )

Вы можете сделать это с помощью переменных CSS, хотя это немного беспорядочно.

Сначала установите переменную, содержащую только значения RGB в порядке цвета, который вы хотите использовать:

:root {
  --color-success-rgb: 80, 184, 60; 
}

Затем вы можете назначить значение RGBA для цвета и извлечь из этой переменной все, кроме альфа-значения:

.button--success {
  background: rgba(var(--color-success-rgb), 0.8);
}

Это не очень красиво, но позволяет использовать одни и те же значения RGB, но разные альфа-значения для цвета.

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

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

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

Столкнулся с похожей проблемой. Вот что я сделал, и он отлично работает ( only alpha changes on hover and also the text is not affected), выполнив следующие действия:

1) Примените выделенный (или любой по вашему выбору) класс к любому элементу, для которого вы хотите изменить альфа фона.

2) Получить цвет фона rgba

3) Сохраните его в строке и манипулируйте им (измените альфа), как хотите, при наведении курсора (mouseenter и mouseleave)

HTML-код:

<div class="highlighted brown">Link 1</div><br><br>
<div class="highlighted green">Link 1</div>

Код CSS:

.brown {background-color: rgba(118,76,41,.8);}
.green {background-color: rgba(51,91,11,.8);}

Код Javascript:

$(document).on({

            mouseenter: function() {

            var rgba_str = $(this).css("background-color");
            var new_rgba_str ="rgba(" + rgba_str.substring(rgba_str.lastIndexOf("(")+1,rgba_str.lastIndexOf(",")) + ", 0.5)";   

                $(this).css("background-color",new_rgba_str ); 
               },

             mouseleave: function(){

                 var rgba_str = $(this).css("background-color");

            var new_rgba_str ="rgba(" + rgba_str.substring(rgba_str.lastIndexOf("(")+1,rgba_str.lastIndexOf(",")) + ", 0.8)";               
                $(this).css("background-color",new_rgba_str ); 

               }

        },'.highlighted');

Рабочий скрипт: http://jsfiddle.net/HGHT6/1/

Простой обходной путь, 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;
}

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

a:hover { color : #c00; } 

сделано!