Чи можна змінити лише альфа кольору тла rgba на наведення курсора?


100

У мене є набір <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);}

До речі, що у вас divстихії роблять a?
BoltClock


@mercator: Гаразд. Я пропустив це.
BoltClock

@BoltClock Здавалося, найпростіший спосіб кодування ефекту - один aтег на відміну imgвід тексту навколо та іншого навколо тексту. Те, що він підтримується HTML 5, є приємним бонусом.
Fireflight

Коли було задано це запитання - з CSS це було неможливо. Тепер це можливо - із змінними CSS - як я показав у власній відповіді
Даніелд

Відповіді:


51

Тепер це можливо за допомогою спеціальних властивостей:

.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тут не є доцільним.


15

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

  • ви вже не використовуєте елемент psuedo для чогось; і
  • ви можете встановити positionна <div>тег відносне або абсолютне значення

Варіант 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


Гарна відповідь, дякую. Третій варіант виявився кориснішим і простішим, якщо я скасував цей метод: не використовуйте нічого додаткового без наведення курсора, а при наведенні курсора: box-shadow: inset 0 0 0 99999px rgba (128,128,128,0.2). Це було мені потрібно, оскільки в моїх рядах чергуються білий і світло-сірий, тому вихідна відповідь не змінила білого.
Довєв Гефец

12

Ні, це неможливо.

Ви можете спробувати попередній процесор CSS , якщо ви хочете зробити подібне.

З того, що я міг бачити, принаймні LESS і Sass мають функції, які дозволяють зробити кольори більш-менш прозорими.


1
Я завжди забуваю про SCSS / менше. Завжди. Можливо, мені потрібно почати фактично їх використовувати.
BoltClock

У SCSS це транспарантизація ([колір], 0,8). Дивіться sass-lang.com/documentation/Sass/Script/…
Arian Acosta

6

Ні, це неможливо.

Якщо ви хочете використовувати rgba, ви повинні встановити кожне значення разом. Немає можливості змінити лише альфу.


5

Зараз 2017 рік, і це зараз можливо

Спеціальні властивості CSS / Змінні CSS ( Каніуса )

Класичний випадок використання змінних 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;
}

Codepen

Подальше читання:

Індивідуалізація властивостей CSS за допомогою змінних CSS (Dan Wilson)


3

є альтернатива, ви можете додати фонове зображення лінійного градієнта до вихідного кольору.

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/


поки що єдина задовольняюча відповідь для мене.
Андре Елріко

3

просте рішення:

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


2

Чому б не використовувати :hoverта вказати іншу непрозорість у класі наведення курсора?

a:hover {
     opacity:0.6
}

13
Тому що це впливає на весь елемент.
BoltClock

3
з SVG-об’єктами, це можливо використовуватиfill-opacity
Квільйон

1
не тільки весь елемент, але і всі дочірні елементи.
Даніель Ф

2

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

Оскільки я хотів зробити забарвлення на окремих елементах, я використав: раніше, щоб створити прозорий білий поділ на: навести курсор. Це дуже базове вимивання.

#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 )


2

Це можна зробити за допомогою змінних CSS, хоча це трохи безладно.

Спочатку встановіть змінну, що містить лише значення RGB, для того, який колір ви бажаєте використовувати:

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

Тоді ви можете призначити RGBA значення для кольору і витягнути все, крім значення альфа з цієї змінної:

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

Це не дуже красиво, але це дозволяє використовувати ті самі значення RGB, але різні значення альфа для кольору.


1
Це розумне рішення проблеми. І змінна з кольором не повинна бути включена :root, вона може бути в класі елемента, встановивши її базовий колір. Дякую!
Бред

1

Оновлення: На жаль, це неможливо зробити. Вам потрібно буде написати два окремих селектори:


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

Відповідно до W3C, rgbaвластивість не має / підтримує inheritзначення.


Проблема полягає в тому, що inheritце невірний аргумент функції. Ви помітите, що це не працює з будь-якою іншою функцією CSS.
BoltClock

Під функцією ви маєте на увазі такі речі, як rgbaі transitions? Тому що я знаю, що він підтримує досить багато властивостей.
айп

Так, разом з url(), і attr()так далі теж. inheritє лише властивістю.
BoltClock

Я вже знав url()і про переходи. Я просто не був впевнений на 100%, rgbaтому що використовується для кольорів. Дякую, що ви навчили мене :)!
айп

1

Я зіткнувся з подібною проблемою. Ось що я зробив, і це добре працює ( only alpha changes on hover and also the text is not affected), виконавши наступні кроки:

1) Застосовуйте виділений (або будь-який на ваш вибір) клас до того елементу, на який ви хочете змінити фонову альфа.

2) Отримайте rgba фонового кольору

3) Зберігайте його в рядку і маніпулюйте ним (змініть альфа) так, як вам потрібно, коли навести курсор миші (курсор миші та миша)

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/


0

Просте вирішення, 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;
}

-5

Йдеться про найпростіший спосіб; помістіть це у свій таблицю стилів css:

a:hover { color : #c00; } 

зроблено!


- просто підберіть колір до чогось близького. непрозорість працює не у всіх браузерах.
д-р. нуль

У вашій відповіді є приємна хитрість, але ваш коментар абсолютно не має значення.
BoltClock
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.