Можно ли изменить только альфа цвета фона 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);}

ОТВЕТЫ

Ответ 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 здесь неуместно.

Ответ 2

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

Вы можете попробовать предварительный процессор CSS, хотя, если вы хотите сделать что-то подобное.

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

Ответ 3

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

  • вы еще не используете элемент psuedo для чего-либо; а также
  • Вы можете установить 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

Ответ 4

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

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

Ответ 5

Сейчас 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>

Ответ 6

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

a:hover {
     opacity:0.6
}

Ответ 7

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

Поскольку я хотел сделать раскраску для отдельных элементов, я использовал: раньше, чтобы создать прозрачный белый 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)

Ответ 8

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

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

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

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

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

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

Ответ 9

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


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

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

Ответ 10

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

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

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

3) Храните его в строке и манипулируйте им (измените альфа), как вы хотите, на hover (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/

Ответ 11

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

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
}

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

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

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

Ответ 12

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

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

Ответ 13

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

Ответ 14

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

a:hover { color : #c00; }

сделано!