Apakah mungkin mengubah hanya alfa dari warna latar belakang rgba saat mengarahkan kursor?

Saya memiliki sekumpulan <a>tag dengan warna latar belakang rgba yang berbeda tetapi alfa yang sama. Apakah mungkin untuk menulis satu gaya css yang hanya akan mengubah opasitas atribut rgba?

Contoh singkat kode:

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

Dan gayanya

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

Apa yang ingin saya lakukan adalah menulis satu gaya yang akan mengubah opasitas saat di <a>-arahkan, namun warnanya tidak berubah.

Sesuatu seperti

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

Ini sekarang dapat dilakukan dengan properti khusus:

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

Untuk memahami cara kerjanya, lihat Bagaimana cara menerapkan opasitas ke variabel warna CSS?

Jika properti kustom bukan merupakan pilihan, lihat jawaban asli di bawah ini.

Sayangnya, tidak, Anda harus menentukan nilai merah, hijau, dan biru lagi untuk setiap kelas:

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

Anda hanya dapat menggunakan inheritkata kunci saja sebagai nilai properti, dan meskipun demikian penggunaan dari inherittidak sesuai di sini.

Anda dapat melakukan berbagai hal untuk menghindari keharusan kode keras nomor jika Anda mau. Beberapa metode ini hanya berfungsi jika Anda menggunakan latar belakang putih polos karena mereka benar-benar menambahkan warna putih di atasnya daripada mengurangi opasitas. Yang pertama harus berfungsi dengan baik untuk semua yang disediakan:

• Anda belum menggunakan elemen psuedo untuk sesuatu; dan
• Anda dapat mengatur positionke relatif atau absolut pada <div>tag

Opsi 1: ::beforeelemen 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;
}

Opsi 2: hamparan gif putih:

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

Opsi 3: box-shadowMetode:

Variasi dari metode gif, tetapi mungkin memiliki masalah kinerja.

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

Contoh CodePen: http://codepen.io/chrisboon27/pen/ACdka

Tidak, itu tidak mungkin.

Anda dapat mencoba pra-prosesor CSS , jika Anda ingin melakukan hal semacam ini.

Dari apa yang saya lihat, setidaknya LESS dan Sass memiliki fungsi yang dapat membuat warna lebih, atau kurang, transparan.

Tidak, itu tidak mungkin.

Jika Anda ingin menggunakan rgba, Anda harus mengatur setiap nilai bersama-sama. Tidak ada cara untuk hanya mengubah alfa.

Sekarang tahun 2017 dan sekarang mungkin dengan

Properti khusus CSS / Variabel CSS ( Caniuse )

Salah satu kasus penggunaan klasik untuk variabel CSS adalah kemampuan untuk mengindividualisasikan bagian nilai properti.

Jadi di sini, alih-alih mengulangi seluruh ekspresi rgba sekali lagi - kami membagi atau 'memisahkan' rgbanilai menjadi 2 bagian / variabel (satu untuk nilai rgb dan satu untuk alfa)

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

Kemudian, pada hover kita sekarang dapat memodifikasi variabel --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

Bacaan lebih lanjut:

Mempersonalisasi Properti CSS dengan Variabel CSS (Dan Wilson)

ada alternatif, Anda dapat menambahkan gambar latar belakang gradien linier ke warna asli.

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
}

Selain itu, dengan properti css3 filter, Anda juga dapat melakukannya, tetapi tampaknya itu akan mengubah warna teks

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

berikut adalah jsfiddle: https://jsfiddle.net/zhangyu911013/epwyL296/2/

solusi sederhana:

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

contoh: https://jsfiddle.net/epwyL296/14/

mainkan saja dengan alfa latar belakang. jika Anda menginginkan terang, bukan kegelapan, ganti # 000 dengan #fff

Mengapa tidak menggunakan :hoverdan menentukan opasitas yang berbeda di kelas hover?

a:hover {
     opacity:0.6
}

Saya memiliki masalah serupa. Saya memiliki 18 div berbeda yang berfungsi sebagai tombol, dan masing-masing memiliki warna berbeda. Daripada mencari tahu kode warna untuk masing-masing atau menggunakan div: hover selector untuk mengubah opacity (yang mempengaruhi semua anak) saya menggunakan pseudo-class: before seperti dalam jawaban @Chris Boon.

Karena saya ingin melakukan pewarnaan pada masing-masing elemen, saya menggunakan: before untuk membuat div putih transparan pada: hover. Ini adalah pencucian yang sangat mendasar.

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

Menurut CanIUse.com, ini seharusnya memiliki sekitar 92% dukungan pada awal 2014. ( http://caniuse.com/#feat=css-gencontent )

Anda dapat melakukan ini dengan variabel CSS, meskipun sedikit berantakan.

Pertama, tetapkan variabel yang hanya berisi nilai RGB, secara berurutan, dari warna yang ingin Anda gunakan:

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

Kemudian Anda dapat menetapkan nilai RGBA untuk warna dan menarik semuanya kecuali nilai alfa dari variabel ini:

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

Ini tidak super cantik, tetapi ini memungkinkan Anda menggunakan nilai RGB yang sama tetapi nilai alfa berbeda untuk suatu warna.

Pembaruan: Sayangnya tidak mungkin untuk melakukan itu. Anda harus menulis dua pemilih terpisah dari:

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

Menurut W3C, rgbaproperti tidak memiliki / mendukung inheritnilai.

Saya menghadapi masalah yang sama. Inilah yang saya lakukan dan berfungsi dengan baik ( only alpha changes on hover and also the text is not affected) dengan langkah-langkah berikut:

1) Terapkan kelas yang disorot (atau salah satu pilihan Anda) ke elemen mana pun yang ingin Anda ubah alfa latar belakangnya.

2) Dapatkan warna latar belakang rgba

3) Simpan dalam string dan manipulasi (ubah alfa) seperti yang Anda inginkan saat hover (mouseenter dan mouseleave)

Kode HTML:

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

Kode CSS:

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

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

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

Solusi sederhana dengan opacityjika Anda dapat mengakomodasi sedikit perubahan dalam 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;
}

Ini tentang cara paling sederhana; taruh ini di stylesheet css Anda:

a:hover { color : #c00; } 

selesai!