เป็นไปได้ไหมที่จะเปลี่ยนเฉพาะอัลฟาของสีพื้นหลัง rgba บนโฮเวอร์?

ฉันมีชุดของ<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);}

ตอนนี้สามารถทำได้ด้วยคุณสมบัติที่กำหนดเอง:

.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จะไม่เหมาะสมที่นี่

คุณสามารถทำสิ่งต่าง ๆ เพื่อหลีกเลี่ยงไม่ให้รหัสตัวเลขยากหากคุณต้องการ วิธีการเหล่านี้บางวิธีใช้ได้ผลก็ต่อเมื่อคุณใช้พื้นหลังสีขาวธรรมดาเนื่องจากเพิ่มสีขาวไว้ด้านบนแทนที่จะลดความทึบ อันแรกควรทำงานได้ดีสำหรับทุกสิ่งที่มีให้:

• คุณยังไม่ได้ใช้องค์ประกอบ 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

ไม่เป็นไปไม่ได้

คุณสามารถลองใช้ตัวประมวลผลล่วงหน้า CSS ได้หากคุณต้องการทำสิ่งนี้

จากสิ่งที่ฉันเห็นอย่างน้อย LESSและSassก็มีฟังก์ชันที่สามารถทำให้สีโปร่งใสมากขึ้นหรือน้อยลง

ไม่เป็นไปไม่ได้

หากต้องการใช้rgbaต้องกำหนดแต่ละค่าร่วมกัน ไม่มีทางเปลี่ยนอัลฟ่าได้เท่านั้น

ตอนนี้เป็นปี 2017 และตอนนี้เป็นไปได้ด้วย

คุณสมบัติที่กำหนดเอง CSS / ตัวแปร CSS ( Caniuse )

กรณีการใช้งานแบบคลาสสิกอย่างหนึ่งสำหรับตัวแปร 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;
}

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

อ่านเพิ่มเติม:

การปรับคุณสมบัติ CSS ให้เป็นรายบุคคลด้วยตัวแปร CSS (Dan Wilson)

มีอีกทางเลือกหนึ่งคือคุณสามารถเพิ่มภาพพื้นหลังไล่ระดับเชิงเส้นลงบนสีดั้งเดิมได้

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/

วิธีง่ายๆ:

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

ทำไมไม่ใช้:hoverและระบุความทึบที่แตกต่างกันในคลาสโฮเวอร์

a:hover {
     opacity:0.6
}

ฉันมีปัญหาที่คล้ายกัน ฉันมี 18 div ที่แตกต่างกันทำงานเป็นปุ่มและแต่ละปุ่มมีสีต่างกัน แทนที่จะหารหัสสีสำหรับแต่ละรหัสหรือใช้ตัวเลือก div: hover เพื่อเปลี่ยนความทึบ (ซึ่งมีผลต่อเด็กทุกคน) ฉันใช้คลาสหลอก: ก่อนหน้านี้ในคำตอบของ @Chris Boon

เนื่องจากฉันต้องการทำสีในแต่ละองค์ประกอบฉันจึงใช้: ก่อนหน้านี้เพื่อสร้าง div สีขาวโปร่งใสบน: hover นี่คือการชะล้างขั้นพื้นฐาน

#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 สิ่งนี้ควรได้รับการสนับสนุน 92% ตั้งแต่ต้นปี 2014 ( http://caniuse.com/#feat=css-gencontent )

คุณสามารถทำได้ด้วยตัวแปร CSS แม้ว่ามันจะยุ่งเล็กน้อย

ขั้นแรกตั้งค่าตัวแปรที่มีเฉพาะค่า RGB ตามลำดับของสีที่คุณต้องการใช้:

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

จากนั้นคุณสามารถกำหนดค่า RGBA สำหรับสีและดึงทุกอย่างยกเว้นค่าอัลฟาจากตัวแปรนี้:

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

นี่ไม่ได้สวยมาก แต่ให้คุณใช้ค่า RGB เดียวกัน แต่ค่าอัลฟาต่างกันสำหรับสี

อัปเดต:เป็นไปไม่ได้ที่จะทำเช่นนั้นได้ คุณจะต้องเขียนตัวเลือกสองตัวแยกกันของ:

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

ตาม W3C rgbaคุณสมบัติไม่มี / รองรับinheritค่า

ฉันประสบปัญหาที่คล้ายกัน นี่คือสิ่งที่ฉันทำและมันใช้งานได้ดี ( only alpha changes on hover and also the text is not affected) ตามขั้นตอนต่อไปนี้:

1) ใช้คลาสที่ไฮไลต์ (หรือที่คุณเลือก) กับองค์ประกอบใดก็ตามที่คุณต้องการเปลี่ยนอัลฟ่าพื้นหลัง

2) รับสีพื้นหลัง rgba

3) เก็บไว้ในสตริงและจัดการ (เปลี่ยนอัลฟ่า) ตามที่คุณต้องการบนโฮเวอร์ (mouseenter และ mouseleave)

รหัส 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');

การทำงาน Fiddle: http://jsfiddle.net/HGHT6/1/

วิธีแก้ปัญหาง่ายๆคือ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;
}

นี่เป็นวิธีที่ง่ายที่สุด ใส่สิ่งนี้ในสไตล์ชีต css ของคุณ:

a:hover { color : #c00; } 

เสร็จแล้ว!