web-dev-qa-db-ja.com

CSS：ホバーの要素を明るくする

要素の彩度、不透明度などが100％であると仮定すると、ホバーしたときに背景をわずかに明るくするにはどうすればよいですか？

ユースケースは、ユーザーがページ上の任意の要素にカーソルを合わせるのを許可していることです。 80％の不透明度で同等の各色を決定する必要はありません。

1つの方法は、opacity: 0.4しかし、背景のみを変更したい。

csscss3opacityrgbahsl
37
Don P

かなり前ですが、次のようなことができます：

.element {
    background-color: red;
}
.element:hover {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
}

100pxを必要な数に変更できます。要素全体をカバーするために大きなものを取りました。

それは非常に美しい解決策ではありませんが、うまくいきます！

例： http://jsfiddle.net/6nkh3u7k/5/

61
del4y

簡単な方法は次のとおりです。

.myElement:hover {
  filter: brightness(150%);
}
33
satnam

これを行うには、RGBaメソッド（background-color:rgba(R,G,B,alpha);）を使用する必要があります。

.element{
    background-color:rgba(0,0,0,1); /*where 1 stands for 100% opacity*/
} 
.element:hover{
    background-color:rgba(0,0,0,0.5); /*where 0.5 stands for 50% opacity*/
}

[〜＃〜] fiddle [〜＃〜]

そして、IE8以下でも動作させる必要がある場合、その方法は次のとおりです。

.element:hover{
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);   /* IE6 & 7 */
      zoom: 1;
}

startColorstrとendColorstrの値は、このように構築されることに注意してください#AARRGGBB（AAはアルファチャンネル）、色から別のグラデーション効果が必要ない場合は同じでなければなりません。

7
Yenn

filter: brightness();を使用してCSSのみでこれを行うことができますが、現在はWebKitブラウザーでのみサポートされています。 http://jsfiddle.net/jSyK7/ を参照してください

4
David Storey

従来の背景の代わりに_:after_疑似要素を使用します。 IE_8ではサポートされていますが、rgba()はサポートされていません。

HTML：

_<div class="hoverme">
    <p>Lorem ipsem gimme a dollar!</p>
</div>
_

CSS：

_.hoverme {
    position: relative;
}
.hoverme:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #fff;
    z-index: -1;
}

.hoverme:hover:after {
    background-color: #ddd;
}
_

またはそのようなもの。

http://caniuse.com/#search=%3Aafter

よりスムーズな結果を得るには、CSS3トランジションを追加します。

_.hoverme:after {
  -webkit-transition: all 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
       -o-transition: all 0.3s ease-out;  /* Opera 10.50–12.00 */
          transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}
_

前のスニペットは http://css3please.com からコピーして貼り付けました

http://jsfiddle.net/ghodmode/6sE9E/

3
user166560

不透明度を使用せずにホバーされている要素のbackground-color明度を変更したい場合。 残念ながら。ホバーに特定のbackground-color値を設定しないと、これは不可能だと思います。

ユースケースは、ユーザーがページ上の任意の要素にカーソルを合わせるのを許可していることです。 80％の不透明度で同等の各色を決定する必要はありません。

私が考えることができる1つの代替案がありますが、それは要素全体に半透明のPNGオーバーレイを必要とし、それはまた要素のコンテンツのいずれかをカバーします。それによりあなたの問題を解決しません。

関連質問： パーセンテージでCSSを動的に色を明るくまたは暗く変更（Javascript）

2
Chris Bier

box-shadow プロパティを使用して、半透明のオーバーレイを配置することにより、背景色の明るさを制御しています

例：

.btn {

  background-color: #0077dd;
  
  display: inline-flex;
  align-content: center;
  padding: 1em 2em;
  border-radius: 5px;
  color: white;
  font-size: 18px;
  margin: 0.5em;
  cursor: pointer;
}

.btn.brighten:hover {
  box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.3);
}

.btn.darken:hover {
  box-shadow: inset 0em 0em 0em 10em rgba(0, 0, 0, 0.3);
}
<span class="btn brighten">Brighten on Hover</span>
<span class="btn darken">Darken on Hover</span>
0
Arik