css - gray - rgba to hex

CSS: aligerar un elemento en el hover

Question

Suponiendo que un elemento está al 100% de saturación, opacidad, etc. ¿Cómo puedo hacer que su fondo se vuelva un poco más claro cuando está flotando?

El caso de uso es que estoy permitiendo que un usuario se desplace sobre cualquier elemento de una página. No quiero ir determinando cada color equivalente al 80% de opacidad.

Un método es cambiar la opacity: 0.4 pero solo quiero que cambie el fondo.

Answer 1

Aquí hay una manera fácil de hacerlo:

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

Answer 2

Desea cambiar la luminosidad del background-color de cualquier elemento que se desplace sin utilizar opacidad. Desafortunadamente. No creo que esto sea posible sin establecer valores de background-color específicos para sus elementos emergentes.

El caso de uso es que estoy permitiendo que un usuario se desplace sobre cualquier elemento de una página. No quiero ir determinando cada color equivalente al 80% de opacidad.

Hay una alternativa en la que puedo pensar, pero requeriría una superposición PNG translúcida en todo el elemento, que también cubrirá cualquier contenido del elemento. Por lo tanto no solucionando tu problema.

Pregunta relacionada: Cambie dinámicamente el color a más claro o más oscuro según el porcentaje de CSS (Javascript)

Answer 3

Hace mucho tiempo, pero puedes hacer algo como esto:

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

Puede cambiar el 100px en un número que desee. Tomé uno grande para cubrir todo el elemento.

¡No es una solución muy hermosa pero funciona!

Aquí un ejemplo: http://jsfiddle.net/6nkh3u7k/5/

Answer 4

Puedes hacer esto solo con CSS usando filter: brightness(); pero actualmente solo es compatible con los navegadores WebKit. Ver http://jsfiddle.net/jSyK7/

Answer 5

Yo usaría un :after pseudo-elemento en lugar de un fondo convencional. Es compatible con IE8, donde rgba() no lo es.

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

o algo así.

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

Para un resultado más suave, agregue una transición 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+ */
}

El fragmento anterior se copió y pegó de http://css3please.com

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

Answer 6

debe usar el método RGBa ( background-color:rgba(R,G,B,alpha); ) para hacer esto:

.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

Y si necesita hacer que funcione en IE8 o en una versión más baja, así es como se presenta:

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

tenga en cuenta que los valores de startColorstr y endColorstr se construyen de esta manera #AARRGGBB (donde AA es el canal alfa) y deben ser iguales si no desea un efecto de degradado de un color a otro.