recherche

Maison >interface Web >tutoriel CSS >Comment changer la couleur d'arrière-plan d'un div avec CSS

Comment changer la couleur d'arrière-plan d'un div avec CSS

WBOY
WBOYoriginal
2021-12-01 14:39:4410262parcourir

En CSS, vous pouvez utiliser le sélecteur ":active" et l'attribut "background-color" pour obtenir l'effet de cliquer sur un div pour changer la couleur d'arrière-plan. Il vous suffit d'ajouter "div:active{background-color : color value;}" à l'élément div. Stylisez-le simplement.

Comment changer la couleur d'arrière-plan d'un div avec CSS

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Comment changer la couleur d'arrière-plan en cliquant sur un div en CSS

Nous pouvons utiliser le sélecteur actif et l'attribut background-color pour définir la couleur d'arrière-plan en cliquant sur le div.

 : le sélecteur actif est utilisé pour sélectionner les liens actifs. La propriété background-color définit la couleur d'arrière-plan d'un élément.

L'exemple est le suivant : 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div{
                width:200px;
                height:150px;
                border: 1px solid red;
                background-color:red;  
            }
            div:active{
                background-color:black;
            }
        </style>
    </head>
    <body>
        <div>鼠标点击div盒子</div>
    </body>
</html>

Résultat de sortie :

Comment changer la couleur darrière-plan dun div avec CSS

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

html5 css css3 选择器 background
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment obtenir un effet de rotation dans le sens inverse des aiguilles d'une montre sur les éléments de survol de la souris en CSSArticle suivant：Comment obtenir un effet de rotation dans le sens inverse des aiguilles d'une montre sur les éléments de survol de la souris en CSS

Articles Liés

Voir plus