Fareyle üzerine gelindiğinde bir rgba arka plan renginin yalnızca alfasını değiştirmek mümkün müdür?

<a>Farklı rgba arka plan renklerine sahip ancak aynı alfaya sahip bir dizi etiketim var. Yalnızca rgba niteliğinin opaklığını değiştirecek tek bir css stili yazmak mümkün müdür?

Kodun hızlı bir örneği:

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

Ve stiller

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

Yapmak istediğim şey, <a>üzerine gelindiğinde opaklığı değiştirecek , ancak rengi değiştirmeden koruyacak tek bir stil yazmak .

Gibi bir şey

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

Bu artık özel özelliklerle mümkündür:

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

Bunun nasıl çalıştığını anlamak için bkz.Bir CSS renk değişkenine nasıl opaklık uygularım?

Özel özellikler bir seçenek değilse, aşağıdaki orijinal yanıta bakın.

Maalesef hayır, her bir sınıf için kırmızı, yeşil ve mavi değerleri tekrar belirtmeniz gerekecek:

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

inheritAnahtar kelimeyi yalnızca mülk için bir değer olarak kullanabilirsiniz ve bu durumda bile kullanımı inheritburada uygun değildir.

İsterseniz sayıları sabit kodlamaktan kaçınmak için çeşitli şeyler yapabilirsiniz. Bu yöntemlerden bazıları, opaklığı azaltmak yerine gerçekten üstüne beyaz ekledikleri için yalnızca düz beyaz bir arka plan kullanıyorsanız işe yarar. İlki, sağlanan her şey için iyi çalışmalıdır:

• zaten bir şey için psuedo elemanını kullanmıyorsunuz; ve
• etiket positionüzerinde göreli veya mutlak olarak ayarlayabilirsiniz<div>

Seçenek 1: ::beforepsuedo-öğesi:

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

Seçenek 2: beyaz gif yer paylaşımı:

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

Seçenek 3: box-shadowyöntem:

GIF yönteminin bir varyasyonu, ancak performans sorunları olabilir.

.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 örnekleri: http://codepen.io/chrisboon27/pen/ACdka

Hayır, mümkün değil.

Bu tür bir şey yapmak istiyorsanız, bir CSS ön işlemcisini deneyebilirsiniz .

Gördüğüm kadarıyla, en azından LESS ve Sass renkleri daha fazla veya daha az şeffaf hale getirebilecek işlevlere sahip.

Hayır, bu mümkün değil.

Kullanmak istiyorsanız rgba, her bir değeri birlikte ayarlamalısınız. Sadece alfayı değiştirmenin bir yolu yok.

Şimdi 2017 ve bu artık mümkün

CSS özel özellikleri / CSS Değişkenleri ( Caniuse )

CSS değişkenlerinin klasik kullanım durumlarından biri, bir özelliğin değerinin parçalarını bireyselleştirme yeteneğidir.

Yani burada, tüm rgba ifadesini bir kez daha tekrarlamak yerine - rgbadeğerleri 2 parçaya / değişkene ayırıyoruz veya 'bireyselleştiriyoruz' (biri rgb değeri ve diğeri alfa için)

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

Ardından, fareyle üzerine gelindiğinde --alpha değişkenini değiştirebiliriz:

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

Daha fazla okuma:

CSS Özelliklerini CSS Değişkenleriyle Kişiselleştirme (Dan Wilson)

bir alternatif var, orjinal renge doğrusal gradyanlı bir arka plan görüntüsü ekleyebilirsiniz.

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
}

ayrıca, css3 filtre özelliği ile bunu da yapabilirsiniz, ancak metin rengini değiştirecek gibi görünüyor

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

işte bir jsfiddle: https://jsfiddle.net/zhangyu911013/epwyL296/2/

basit çözüm:

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

örnek: https://jsfiddle.net/epwyL296/14/

sadece arka planın alfa ile oynayın. karanlık yerine ışık istiyorsanız, # 000 yerine #fff yazın

:hoverFareyle üzerine gelme sınıfında neden farklı bir opaklık kullanıp belirtmiyorsunuz?

a:hover {
     opacity:0.6
}

Benzer bir problemim vardı. Düğme olarak çalışan ve her biri farklı renkte 18 farklı div'im vardı. Her biri için renk kodlarını bulmak veya opaklığı (tüm çocukları etkileyen) değiştirmek için bir div: hover seçici kullanmak yerine, @Chris Boon'un cevabındaki gibi sözde sınıfı kullandım: daha önce.

Tek tek öğelerin renklendirmesini yapmak istediğim için, önce: şeffaf beyaz bir div on: hover oluşturmak için kullandım. Bu çok basit bir arındırmadır.

#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'a göre, 2014'ün başlarında bu% 92'lik bir desteğe sahip olmalıdır. ( Http://caniuse.com/#feat=css-gencontent )

Biraz dağınık olmasına rağmen bunu CSS değişkenleriyle yapabilirsiniz.

İlk olarak, kullanmak istediğiniz rengin sırasıyla sadece RGB değerlerini içeren bir değişken ayarlayın :

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

Daha sonra bir renk için bir RGBA değeri atayabilir ve bu değişkenden alfa değeri dışındaki her şeyi çekebilirsiniz:

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

Bu çok hoş değil, ancak bir renk için aynı RGB değerlerini ancak farklı alfa değerlerini kullanmanıza izin veriyor.

Güncelleme: Maalesef bunu yapmak mümkün değil. İki ayrı seçici yazmanız gerekecek:

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

W3C'ye göre, rgbamülk inheritdeğere sahip değil / desteklemiyor .

Ben de benzer bir sorunla karşılaştım. İşte yaptığım şey ve only alpha changes on hover and also the text is not affectedaşağıdaki adımlarla iyi çalışıyor ( ):

1) Arka plan alfasını değiştirmek istediğiniz öğeye vurgulanmış (veya seçiminizden herhangi birini) uygulayın.

2) Arka plan rengini alın rgba

3) Bir dizede saklayın ve fareyle üzerine gelindiğinde istediğiniz gibi değiştirin (alfa değiştirin) (mouseenter ve mouseleave)

HTML Kodu:

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

CSS Kodu:

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

Javascript Kodu:

$(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/

Şunlarda opacityküçük bir değişiklik yapabilirseniz basit bir çözüm 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;
}

Bu en basit yolla ilgili; bunu css stil sayfanıza koyun:

a:hover { color : #c00; } 

bitti!