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

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

вы могли бы попробовать CSS pre-processor, хотя, если вы хотите сделать такие вещи.

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

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

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

Вариант 1: ::before psuedo-элемент:

.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

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

Если вы хотите использовать 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 (Dan Wilson)

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

a:hover {
     opacity:0.6
}

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

потому что я хотел сделать раскраску на отдельных элементах, я использовал :прежде чем создать прозрачный белый div on :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, это должно иметь что-то вроде 92% поддержки по состоянию на начало 2014 года. (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/

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

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 filter Вы тоже можете это сделать,но, похоже, он изменит цвет текста

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); 
     }
   }
}

exemple:https://jsfiddle.net/epwyL296/14/

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

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

готово!