Aide CSS
Résolu
Bonjour,
J'aimerais changer la couleur de quatre background à l'aide d'un link/hover.
Voilà mon code :
CSS
HTML
Merci d'avance pour vos réponses.
J'aimerais changer la couleur de quatre background à l'aide d'un link/hover.
Voilà mon code :
CSS
body{
margin:0 auto;
}
#fond{
position:absolute;
background-image:url('images/background.jpg');
background-repeat:no-repeat;
top:0%;
left:0%;
width:100%;
height:94%;
}
#bm{
position:absolute;
background-color:#bbbbbb;
width:100%;
height:6%;
top:94%;
left:0%;
}
#c1{
position:absolute;
background-color:#000000;
width:1em;
height:1em;
top:46em;
left:45em;
z-index:1;
}
#c1 a{
text-decoration:none;
}
#c1 a:hover{
background-color:#FFFFFF;
}
#c2{
position:absolute;
background-color:#000000;
width:1em;
height:1em;
top:46em;
left:46.1em;
z-index:2;
}
#c3{
position:absolute;
background-color:#000000;
width:1em;
height:1em;
top:47.1em;
left:45em;
z-index:3;
}
#c4{
position:absolute;
background-color:#000000;
width:1em;
height:1em;
top:47.1em;
left:46.1em;
z-index:4;
}
HTML
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>titre du site</title> <link rel="stylesheet" href="styles.css" type="text/css" media="screen"> </head> <body> <div id="fond"></div> <a href="#"> <div id="c1"></div> <div id="c2"></div> <div id="c3"></div> <div id="c4"></div> <div id="bm"></div> </a> </body> </html>
Merci d'avance pour vos réponses.
4 réponses
-
Tu ajoute :
:hover
et tu modifie la couleur du background.
Exemple :
Celui là#c3{ position:absolute; background-color:#000000; width:1em; height:1em; top:47.1em; left:45em; z-index:3; }
tu créer le même mais tu ajoute :hover
#c3:hover{ position:absolute; background-color:#000000; width:1em; height:1em; top:47.1em; left:45em; z-index:3; } -
Merci :)
-
dr
-
Bonjour à tous, helas j'ai encore un problème en lien avec, quand j'ai créer les quatre carrés, j'ai mis les hover à la bonne place, mais moi je voudrait qu'au passage que ce soit les quatre carrés qui changent de couleur et non pas un seul à la fois, comment faire svp ?
-
Pour mettre tout les bloc de la même couleur au passage de la souris on peu utiliser JavaScript
un exemple<!DOCTYPE html> <html> <head> <title>tableau</title> <meta charset="UTF-8" /> <style type="text/css"> .bloc { border: 4px black solid; width: 100px; height: 100px; margin: 20px; } </style> </head> <body> <div class="bloc" style="background-color: blue;"> <p> lien bidon <br /> lien bidon <br /> lien bidon </p> </div> <div class="bloc" style="background-color: blue;"> <p> un peu de contenu </p> </div> <div class="bloc" style="background-color: blue;"> <p> un peu de tout et n'importe quoi </p> </div> <script type="text/javascript"> var bloc = document.getElementsByTagName("div"); c = bloc.length; for(var i = 0; i < c; i++) { bloc[i].onmouseover = function() { bloc[0].style.backgroundColor = "red"; bloc[1].style.backgroundColor = "red"; bloc[2].style.backgroundColor = "red"; } bloc[i].onmouseout = function() { bloc[0].style.backgroundColor = "blue"; bloc[1].style.backgroundColor = "blue"; bloc[2].style.backgroundColor = "blue"; } } </script> </body> </html> </body> </html> -
-
-
-
-
