Sujet Précédent Sujet Suivant

Aide CSS

Résolu/Fermé
Utilisateur anonyme - 15 août 2012 à 18:21
 Utilisateur anonyme - 16 août 2012 à 21:00
Bonjour,

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

Réponse 1 / 4
zulfikarhan Messages postés 430 Date d'inscription mercredi 1 août 2012 Statut Membre Dernière intervention 16 août 2012 129
15 août 2012 à 18:26
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;
}
0
Réponse 2 / 4
Utilisateur anonyme
15 août 2012 à 19:14
Merci :)
0
Réponse 3 / 4
zulfikarhan Messages postés 430 Date d'inscription mercredi 1 août 2012 Statut Membre Dernière intervention 16 août 2012 129
16 août 2012 à 13:53
dr
0
Réponse 4 / 4
Utilisateur anonyme
16 août 2012 à 18:39
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 ?
0
@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription dimanche 1 juillet 2012 Statut Membre Dernière intervention 14 décembre 2012 208
Modifié par @lobotomix:~# rm -rf * le 16/08/2012 à 19:17
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>
0
cabon.contact
16 août 2012 à 19:24
En fait je me disais si c'était pas plus simple de prendre une image directement ?
0
@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription dimanche 1 juillet 2012 Statut Membre Dernière intervention 14 décembre 2012 208
16 août 2012 à 19:43
un background-image?
0
cabon.contact
16 août 2012 à 19:45
Oui voilà, avec un hover, deux images différentes. T'en pense quoi ?
0
@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription dimanche 1 juillet 2012 Statut Membre Dernière intervention 14 décembre 2012 208
16 août 2012 à 20:08
oui je te fait ça
0

Discussions similaires

[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
[CSS] Mettre un objet au premier plan
Achillion -
tiran58 -

2 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse