ホバー時にRGBA背景色のアルファのみを変更することは可能ですか?


100

のセットがあります <a>RGBAの背景色が異なるが、アルファは同じタグのます。rgba属性の不透明度のみを変更する単一のCSSスタイルを書くことは可能ですか?

コードの簡単な例:

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

ところで、あなたのdiv要素の中であなたのa要素は何をしていますか?
BoltClock


@メルカトル:よし。私は逃しました。
BoltClock

@BoltClock効果をコード化する最も簡単な方法のように思われました。テキストの周りとa周囲のタグではなく、単一のタグimgです。HTML 5でサポートされているという事実は素晴らしいボーナスです。
Fireflight 2011

この質問が尋ねられたとき-これはCSSでは不可能でした。さて、これは可能である -とCSS変数 -私はに示すきたように私自身の答え
Danield

回答:


51

これは、カスタムプロパティで可能になりました。

.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ここでの使用は適切ではありません。


15

必要に応じて、数値をハードコーディングしなくても済むように、さまざまなことができます。これらのメソッドの一部は、不透明度を下げるのではなく、上に白を追加するため、無地の白い背景を使用する場合にのみ機能します。最初のものは提供されたすべてに対してうまく機能するはずです:

  • あなたはまだ何かのために疑似要素を使っていません。そして
  • あなたが設定することができます position<div>タグで相対または絶対に

オプション1: ::before疑似要素:

.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


良い答え、ありがとう。この方法を逆にすると、3番目のオプションが便利でシンプルになることがわかりました。ホバーせずに追加のものを使用せず、ホバーを使用してください:box-shadow:inset 0 0 0 99999px rgba(128,128,128,0.2)。私の行は白とライトグレーが交互になっているので、これは私にとって必要だったので、元の回答では白は変更されませんでした。
Dovev Hefetz 2017

12

いいえ、それは不可能です。

ただし、このようなことをしたい場合は、CSSプリプロセッサを試すことができます。

私が見ることができることから、少なくともLESSSassには、色をより透明またはより透明にする機能があります。


1
SCSS / LESSはいつも忘れてしまいます。常に。多分私は実際にそれらを使い始める必要があります。
BoltClock

SCSSでは、transparentize([color]、0.8)です。sass-lang.com/documentation/Sass/Script/…を
アリアンアコスタ

6

いいえ、それは不可能です。

を使用する場合はrgba、各値を一緒に設定する必要があります。アルファのみを変更する方法はありません。


5

それは今2017年であり、これは今では可能です

CSSカスタムプロパティ/ CSS変数Caniuse

CSS変数の古典的な使用例の1つは、プロパティの値の一部を個別化する機能です。

したがって、ここでは、rgba式全体をもう一度繰り返す代わりに、rgba値を2つの部分/変数に分割または「個別化」します(1つはrgb値用、もう1つはアルファ用)。

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

Codepen

参考文献:

CSS変数によるCSSプロパティの個別化(Dan Wilson)


3

別の方法があります。元の色に線形グラデーションの背景画像を追加できます。

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/


これまでのところ、私にとって唯一の満足のいく答えです。
Andre Elrico

3

簡単な解決策:

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に置き換えてください



2

同様の問題がありました。ボタンとして機能する18の異なるdivがあり、それぞれが異なる色でした。それぞれのカラーコードを把握したり、div:hoverセレクターを使用して不透明度を変更したりするのではなく(すべての子に影響します)、@ Chris Boonの回答のように:beforeの疑似クラスを使用しました。

個々の要素に色を付けたいので、:beforeを使用して:hoverに透明な白いdivを作成しました。これは非常に基本的なウォッシュアウトです。

#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によると、これは2014年初頭の時点で92%程度のサポートが必要です。(http://caniuse.com/#feat=css-gencontent


2

少し面倒ですが、CSS変数を使用してこれを行うことができます。

まず、使用したい色のRGB値のみを順番に含む変数を設定します。

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

次に、色にRGBA値を割り当て、この変数からアルファ値以外のすべてを取得できます。

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

これはきれいではありませんが、同じRGB値を使用できますが、色に異なるアルファ値を使用できます。


1
これは問題に対する合理的な解決策です。また、色付きの変数はon :rootである必要はありません。要素のクラスにあり、その基本色を設定できます。ありがとう!
Brad

1

更新:残念ながらそれを行うことはできません。次の2つの別個のセレクターを作成する必要があります。


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

W3Cによると、このrgbaプロパティにはinherit値がありません/サポートしていません。


問題は、それinheritが有効な関数引数ではないことです。他のCSS関数では機能しないことがわかります。
BoltClock

機能によって、あなたはのようなものを意味しないrgbaとのtransitions?私はそれがかなりの数のプロパティでサポートされていることを知っているからです。
ayyp

うん、一緒にurl()attr()など。inheritプロパティ値のみです。
BoltClock

url()トランジションについてはすでに知っていました。rgba色に使われているので100%確信が持てませんでした。私を教育してくれてありがとう:)!
ayyp

1

私も同様の問題に直面しました。これが私がやったことであり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');

作業フィドル:http : //jsfiddle.net/HGHT6/1/


0

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

-5

これは最も簡単な方法です。これをあなたのCSSスタイルシートに入れてください:

a:hover { color : #c00; } 

できた!


-色を近いものに合わせるだけです。不透明度はすべてのブラウザで機能するわけではありません。
dr。null

あなたの答えは素晴らしいトリックを持っていますが、あなたのコメントは完全に無関係です。
BoltClock
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.