Aide CSS
Résolu
Utilisateur anonyme
-
Utilisateur anonyme -
Utilisateur anonyme -
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.
A voir également:
- Aide CSS
- Css download - Télécharger - HTML
- Enlever soulignement lien css ✓ - Forum CSS
- Comment créer un lien non souligné ✓ - Forum Réseaux sociaux
- Css ligne horizontale ✓ - Forum CSS
- Enlever le soulignement d'un lien css - Forum CSS
4 réponses
Tu ajoute :
Exemple :
Celui là
tu créer le même mais tu ajoute :hover
:hoveret 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;
}
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
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>
