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

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

.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, если вы хотите делать такие вещи.

Из того, что я мог видеть, по крайней мере, МЕНЬШЕ и Sass содержит функции, которые могут сделать цвета более или менее прозрачными.

настраиваемые свойства 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/

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

a:hover {
     opacity:0.6
}

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

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

У меня была похожая проблема. У меня было 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;
}

Основываясь на ответе Юй Чжана:

В: root (или родительский компонент в Blazor) установите переменные css:

--bg-img-light: linear-gradient(hsla(255,100%,100%,.2) 100%, transparent 100%);
--bg-img-dark: linear-gradient(hsla(0,0%,0%,.2) 100%, transparent 100%);

Затем на любом элементе, к которому вы хотите применить эффект наведения:

.buttontomakelighter:hover {
  background-image: var(--bg-img-light);
}

.buttontomakedarker:hover {
  background-image: var(--bg-img-dark);
}

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

a:hover { color : #c00; } 

сделано!