CSS: lighten a element on hover

Question

Предполагая, что элемент находится на 100% насыщенности, непрозрачности и т. Д. ... как я могу получить его фон станет чуть светлее, когда он завис?

Вариант использования - это то, что я разрешаю пользователю нависнуть над любым элементом на странице. Я не хочу обходиться, определяя каждый эквивалент цвета при непрозрачности 80%.

Один из способов - изменить opacity: 0.4, но я хочу, чтобы фон менялся.

Answer 1

вы должны использовать метод 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 является альфа-каналом) и должен быть таким же, если вы не хотите, чтобы эффект градиента от цвета к другому.

Answer 2

Я использовал бы псевдоэлемент :after вместо обычного фона. Он поддерживается в IE8, где 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/

Answer 3

Вы хотите изменить background-color легкость любого элемента, который витает без использования непрозрачности. К сожалению. Я не думаю, что это возможно без установки конкретных значений background-color для ваших зависаний.

Прецедент в том, что я позволяю пользователю наведите курсор мыши на какой-либо элемент на странице. Я не хочу обойти определение каждого эквивалента цветов при непрозрачности 80%.

Существует одна альтернатива, о которой я могу думать, но для всего элемента потребуется полупрозрачный наложение PNG, который также будет охватывать любое содержимое элемента. Таким образом, вы не решаете свою проблему.

Связанные Вопрос: Dynamically change color to lighter or darker by percentage CSS (Javascript)

Answer 4

Вы можете сделать это только с помощью CSS с помощью filter: brightness(); но только в настоящее время поддерживается в WebKit браузерах. См http://jsfiddle.net/jSyK7/

Answer 5

Это давно, но вы можете сделать что-то вроде этого:

.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/

Answer 6

Вот простой способ сделать это:

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