CSS: le Changement de couleur d'arrière-plan de l'opacité à la souris

J'ai un DIV que j'aimerais changer la couleur de fond de l'opacité, en fonction de si la souris est au-dessus ou pas.

Je sais que vous pouvez utiliser background: rgba(54, 25, 25, .5) etc, mais je veux mettre de la couleur séparément. Est-il possible que je peux JUSTE modifier l'OPACITÉ, et pas la couleur.

Je pourrais opacity: 0.3, etc, mais que les effets sur l'ensemble de la DIV, et j'ai juste à modifier la couleur d'arrière-plan.

Merci pour toute aide.

OriginalL'auteur Chuck Le Butt | 2012-04-30

  1. 4

    Pas de html/css n'ont pas cette option intégré, mais puisque vous avez accès/réglage de la couleur en javascript, vous pouvez également ajouter à votre propre fonction qui peut gérer pour vous.

    Voici un exemple pour vous:

    <script type="text/javascript">
function RGBA(red,green,blue,alpha) {
    this.red = red;
    this.green = green;
    this.blue = blue;
    this.alpha = alpha;
    this.getCSS = function() {
        return "rgba("+this.red+","+this.green+","+this.blue+","+this.alpha+")";
    }
}

//store a copy of the color
var bgColor = new RGBA(255,0,0,0.5);

function setBgOpacity(elem, opac) {
    bgColor.alpha = opac;
    elem.style.backgroundColor = bgColor.getCSS();
}
</script>

    Ensuite dans le code HTML utiliser le onmouseover événement pour modifier l'opacité de la bgColor:

    <div onmouseover="setBgOpacity(this, '0.3');"
     onmousout="setBgOpacity(this, '0.5');">Put your mouse over me</div>
    Excellent moyen de résoudre ce problème particulier. Merci!
    Juste un petit point à clarifier les choses pour ceux confondre entre "l'opacité" et rvb "alpha" - j'avais renommer la fonction de setBgOpacity à setBgAlpha.

    OriginalL'auteur Ozzy

  2. 3

    Vous pouvez rendre le fond d'une partie de différentes div et réglez l'opacité de ce div, c'est à dire

    <div id="container">
    <div id="background"></div>
    <div id="content">
        <p>Lorum ipsum...</p>
    </div>
</div>

    Et

    #background { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background:#FF0000;
}
#background:hover { opacity:0.3; }
#content { position:relative; z-index:10; }
    #conteneur { overflow:hidden; position:relative; }

    OriginalL'auteur Jeff

  3. 2

    - Il une différence entre la valeur Alpha dans RGBa et de l'Opacité. L'opacité affecte tous les éléments enfants, Alpha n'.

    Vous aurez à lire la valeur de couleur actuelle, puis de reformuler comme RGBa avec la nouvelle valeur Alpha. Vous pouvez avoir besoin de convertir le courant en hexadécimal de la couleur de la valeur à une décimale triplet pour ce faire.

    Aucun point lors de ses plus facile de garder une copie de la couleur et de le modifier à la place. Voir mon exemple stackoverflow.com/a/10388640/1031312
    Merci pour expliquer la différence entre l'opacité et la RGBa.

    OriginalL'auteur Diodeus - James MacFarlane

  4. 1

    Si vous êtes en s'appuyant sur RGBA pour modifier l'opacité de la couleur de fond, non, il n'est pas possible de définir séparément à partir de la couleur elle-même. Vous aurez à déclarer explicite RGBA la valeur normale et les états stationnaire.

    OriginalL'auteur chipcullen

  5. 1

    Non, vous ne pouvez pas modifier uniquement l'alpha de rgba. Donc, vous devriez utiliser le RGB partie de la RGBa.

    OriginalL'auteur Wouter J

  6. 1

    Si vous voulez distincte de la couleur de fond du récipient que vous pouvez utiliser :before ou :after. 

    .container { 
    position: relative;

    &:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #000;
        opacity: 1;
        z-index: -1;
    }

    &:hover {
        &:before {
            opacity: 0.5;
        }
    }

    .content {
        z-index: 1;
    }
}

    Lorsque vous passez la souris sur la .container, seule l'opacité de la :before est effectuée, et non le contenu.

    OriginalL'auteur Matthew Skinner