要素の彩度、不透明度などが100%であると仮定すると、ホバーしたときに背景をわずかに明るくするにはどうすればよいですか?
ユースケースは、ユーザーがページ上の任意の要素にカーソルを合わせるのを許可していることです。 80%の不透明度で同等の各色を決定する必要はありません。
1つの方法は、opacity: 0.4
しかし、背景のみを変更したい。
かなり前ですが、次のようなことができます:
.element {
background-color: red;
}
.element:hover {
box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1);
}
100pxを必要な数に変更できます。要素全体をカバーするために大きなものを取りました。
それは非常に美しい解決策ではありませんが、うまくいきます!
簡単な方法は次のとおりです。
.myElement:hover {
filter: brightness(150%);
}
これを行うには、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*/
}
そして、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はアルファチャンネル)、色から別のグラデーション効果が必要ない場合は同じでなければなりません。
filter: brightness();
を使用してCSSのみでこれを行うことができますが、現在はWebKitブラウザーでのみサポートされています。 http://jsfiddle.net/jSyK7/ を参照してください
従来の背景の代わりに_: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 からコピーして貼り付けました
不透明度を使用せずにホバーされている要素のbackground-color
明度を変更したい場合。 残念ながら。ホバーに特定のbackground-color
値を設定しないと、これは不可能だと思います。
ユースケースは、ユーザーがページ上の任意の要素にカーソルを合わせるのを許可していることです。 80%の不透明度で同等の各色を決定する必要はありません。
私が考えることができる1つの代替案がありますが、それは要素全体に半透明のPNGオーバーレイを必要とし、それはまた要素のコンテンツのいずれかをカバーします。それによりあなたの問題を解決しません。
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>