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


100

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

Swoją drogą, co divrobią twoje aelementy w twoich elementach?
BoltClock


@mercator: W porządku. Tęsknie za tym.
BoltClock

@BoltClock Wydawało się, że jest to najprostszy sposób na zakodowanie efektu, pojedynczy atag w przeciwieństwie do jednego wokół imgi drugiego wokół tekstu. Fakt, że jest obsługiwany przez HTML 5, jest miłym dodatkiem.
Fireflight,

Kiedy zadano to pytanie - nie było to możliwe w przypadku CSS. Teraz jest to możliwe - ze zmiennymi CSS - jak pokazałem w mojej własnej odpowiedzi
Danield

Odpowiedzi:


51

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.


15

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


Dobra odpowiedź, dzięki. Uważam, że trzecia opcja jest użyteczna i prostsza, jeśli odwrócę tę metodę: nie używaj niczego dodatkowego bez najechania, a po najechaniu użyj: box-shadow: inset 0 0 0 99999px rgba (128,128,128,0,2). Było to dla mnie konieczne, ponieważ moje rzędy są naprzemiennie białe i jasnoszare, więc oryginalna odpowiedź nie zmieniła bieli.
Dovev Hefetz


6

Nie, to niemożliwe.

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


5

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

Codepen

Dalsze czytanie:

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


3

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/


jak dotąd jedyna satysfakcjonująca dla mnie odpowiedź.
Andre Elrico

3

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



2

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 )


2

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.


1
To rozsądne rozwiązanie problemu. A zmienna z kolorem nie musi być włączona :root, może znajdować się w klasie elementu, ustawiając jego kolor bazowy. Dzięki!
Brad

1

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.


Problem polega na tym, że inheritnie jest to prawidłowy argument funkcji. Zauważysz, że nie działa z żadną inną funkcją CSS.
BoltClock

Przez funkcję masz na myśli takie rzeczy jak rgbai transitions? Ponieważ wiem, że jest obsługiwany przez kilka właściwości.
ayyp

Tak, wraz z url(), attr()etc też. inheritjest tylko wartością właściwości.
BoltClock

Wiedziałem już o url()przejściach. Po prostu nie byłem w 100% pewien, rgbaponieważ jest używany do kolorów. Dziękuję za edukację :)!
ayyp

1

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/


0

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

-5

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

a:hover { color : #c00; } 

Gotowe!


- po prostu dopasuj kolor do czegoś zbliżonego. krycie nie działa we wszystkich przeglądarkach.
dr. zerowy

Twoja odpowiedź ma fajną sztuczkę, ale Twój komentarz jest całkowicie nieistotny.
BoltClock
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.