web-dev-qa-db-fra.com

CSS: alléger un élément en survol

En supposant qu'un élément est à 100% de saturation, d'opacité, etc ... comment puis-je avoir son arrière-plan devenir légèrement plus léger lorsqu'il est survolé?

Le cas d'utilisation est que j'autorise un utilisateur à survoler n'importe quel élément d'une page. Je ne veux pas faire le tour de déterminer chaque équivalent de couleurs à 80% d'opacité.

Une méthode consiste à modifier le opacity: 0.4 mais je veux seulement que l'arrière-plan change.

csscss3opacityrgbahsl
37
Don P

Il y a longtemps, mais vous pouvez faire quelque chose comme ça:

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

Vous pouvez changer le 100px en un nombre que vous voulez. J'en ai pris un grand pour couvrir l'ensemble de l'élément.

Ce n'est pas une très belle solution mais ça marche!

Voici un exemple: http://jsfiddle.net/6nkh3u7k/5/

61
del4y

Voici un moyen simple de le faire:

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

vous devez utiliser la méthode RGBa (background-color:rgba(R,G,B,alpha);) pour ce faire:

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

[~ # ~] violon [~ # ~]

ET si vous avez vraiment besoin de le faire fonctionner dans IE8 ou inférieur, voici comment cela se produit:

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

notez que les valeurs startColorstr et endColorstr sont construites comme ceci #AARRGGBB (où AA est le canal Alpha) et doit être le même si vous ne voulez pas d'un effet de dégradé d'une couleur à l'autre.

7
Yenn

Vous pouvez le faire avec seulement CSS en utilisant filter: brightness(); mais il n'est actuellement pris en charge que dans les navigateurs WebKit. Voir http://jsfiddle.net/jSyK7/

4
David Storey

J'utiliserais un pseudo-élément :after Au lieu d'un arrière-plan conventionnel. Il est pris en charge dans IE8, où rgba() ne l'est pas.

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

ou quelque chose comme ça.

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

Pour un résultat plus fluide, ajoutez une transition 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+ */
}

L'extrait précédent a été copié et collé depuis http://css3please.com

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

3
user166560

Vous souhaitez modifier le background-color légèreté de tout élément survolé sans utiliser d'opacité. Malheureusement. Je ne pense pas que cela soit possible sans définir des paramètres spécifiques background-color valeurs pour vos survols.

Le cas d'utilisation est que j'autorise un utilisateur à survoler n'importe quel élément d'une page. Je ne veux pas faire le tour de déterminer chaque équivalent de couleurs à 80% d'opacité.

Il y a une alternative à laquelle je peux penser, mais cela nécessiterait une superposition PNG translucide sur tout l'élément, qui couvrira également tout le contenu de l'élément. De ce fait, ne résout pas votre problème.

Question connexe: Changer dynamiquement la couleur en plus clair ou plus foncé en pourcentage CSS (Javascript)

2
Chris Bier

J'utilise la propriété box-shadow pour contrôler la luminosité de la couleur d'arrière-plan, en plaçant une superposition translucide

Exemple:

.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