CSS: облегчить элемент при зависании

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

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

Ответ 4

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

Ответ 5

Я бы использовал псевдоэлемент :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/

Ответ 6

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

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

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

Связанный с нами вопрос: Динамически менять цвет на более легкий или более темный по CSS (Javascript)

Ответ 7

Я использую свойство 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>