Czy po najechaniu kursorem można zmienić tylko alfa koloru tła rgba?

Mam zestaw <a>tagów z różnymi kolorami tła rgba, ale z tą samą alfa. Czy można napisać pojedynczy styl CSS, który zmieni tylko przezroczystość atrybutu rgba?

Szybki przykład kodu:

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

I style

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

Chciałbym napisać jeden styl, który zmieniłby krycie po <a>najechaniu kursorem, ale nie zmieniłby koloru.

Coś jak

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

Jest to teraz możliwe dzięki właściwościom niestandardowym:

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

Aby zrozumieć, jak to działa, zobacz Jak zastosować krycie do zmiennej koloru CSS?

Jeśli niestandardowe właściwości nie są opcją, zobacz oryginalną odpowiedź poniżej.

Niestety nie, będziesz musiał ponownie określić wartości czerwonego, zielonego i niebieskiego dla każdej indywidualnej klasy:

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

Możesz użyć samego inheritsłowa kluczowego jako wartości właściwości, a nawet wtedy użycie inheritnie jest właściwe w tym przypadku.

Jeśli chcesz, możesz zrobić różne rzeczy, aby uniknąć sztywnego kodowania liczb. Niektóre z tych metod działają tylko wtedy, gdy używasz zwykłego białego tła, ponieważ tak naprawdę dodają biel na wierzchu, zamiast zmniejszać krycie. Pierwsza z nich powinna działać dobrze na wszystko, co zostało dostarczone:

• nie używasz już elementu psuedo do czegoś; i
• positionna <div>tagu można ustawić wartość względną lub bezwzględną

Opcja 1: ::beforepseudo-element:

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

Opcja 2: biała nakładka 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;
}

Opcja 3: box-shadowmetoda:

Odmiana metody gif, ale może powodować problemy z wydajnością.

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

Przykłady CodePen: http://codepen.io/chrisboon27/pen/ACdka

Nie, to niemożliwe.

Możesz jednak wypróbować preprocesor CSS , jeśli chcesz zrobić coś takiego.

Z tego, co widziałem, przynajmniej LESS i Sass mają funkcje, które sprawiają, że kolory są mniej lub bardziej przezroczyste.

Nie, to niemożliwe.

Jeśli chcesz użyć rgba, musisz ustawić wszystkie wartości razem. Nie ma sposobu, aby zmienić tylko alfę.

Jest teraz 2017 i jest to teraz możliwe dzięki

Właściwości niestandardowe CSS / zmienne CSS ( Caniuse )

Jednym z klasycznych przypadków użycia zmiennych CSS jest możliwość indywidualizacji części wartości właściwości.

Więc tutaj, zamiast ponownie powtarzać całe wyrażenie rgba - dzielimy lub „zindywidualizowujemy” rgbawartości na 2 części / zmienne (jedną dla wartości rgb i jedną dla alfa)

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

Następnie po najechaniu myszą możemy teraz zmodyfikować zmienną --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

Dalsze czytanie:

Indywidualizacja właściwości CSS za pomocą zmiennych CSS (Dan Wilson)

istnieje alternatywa, możesz dodać obraz tła z liniowym gradientem do oryginalnego koloru.

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
}

również z właściwością filtra css3 możesz to zrobić, ale wygląda na to, że zmieni to kolor tekstu

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

tutaj jest jsfiddle: https://jsfiddle.net/zhangyu911013/epwyL296/2/

proste rozwiązanie:

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

przykład: https://jsfiddle.net/epwyL296/14/

po prostu graj z alfa tła. jeśli chcesz mieć światło zamiast ciemności, po prostu zastąp # 000 przez #fff

Dlaczego nie użyć :hoveri nie określić innego krycia w klasie hover?

a:hover {
     opacity:0.6
}

Miałem podobny problem. Miałem 18 różnych elementów div działających jako przyciski, a każdy z nich miał inny kolor. Zamiast wymyślać kody kolorów dla każdego z nich lub użyć selektora div: hover, aby zmienić krycie (który wpływa na wszystkie dzieci), użyłem pseudoklasy: wcześniej, jak w odpowiedzi @Chris Boon.

Ponieważ chciałem pokolorować poszczególne elementy, użyłem: wcześniej do stworzenia przezroczystego białego div na: hover. To bardzo podstawowe wymywanie.

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

Według CanIUse.com powinno to mieć około 92% poparcia na początku 2014 r. ( Http://caniuse.com/#feat=css-gencontent )

Możesz to zrobić za pomocą zmiennych CSS, chociaż jest to trochę bałaganiarskie.

Najpierw ustaw zmienną zawierającą tylko wartości RGB w kolejności koloru, którego chcesz użyć:

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

Następnie możesz przypisać wartość RGBA do koloru i wyciągnąć wszystko oprócz wartości alfa z tej zmiennej:

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

To nie jest super ładne, ale pozwala użyć tych samych wartości RGB, ale różnych wartości alfa dla koloru.

Aktualizacja: niestety nie można tego zrobić. Musisz napisać dwa oddzielne selektory:

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

Według W3C rgbawłaściwość nie ma / nie obsługuje inheritwartości.

Miałem podobny problem. Oto, co zrobiłem i działa dobrze ( only alpha changes on hover and also the text is not affected), wykonując następujące kroki:

1) Zastosuj podświetloną (lub dowolną wybraną) klasę do dowolnego elementu, dla którego chcesz zmienić alfa tła.

2) Pobierz kolor tła rgba

3) Przechowuj go w ciągu i manipuluj nim (zmień alfa), jak chcesz po najechaniu kursorem (mouseenter i mouseleave)

Kod HTML:

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

Kod CSS:

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

Kod 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');

Working Fiddle: http://jsfiddle.net/HGHT6/1/

Proste obejście, opacityjeśli możesz uwzględnić niewielką zmianę w 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;
}

Chodzi o najprostszy sposób; umieść to w swoim arkuszu stylów css:

a:hover { color : #c00; } 

Gotowe!