Aide CSS

Résolu

Utilisateur anonyme -
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.

A voir également:

Aide CSS
Css download - Télécharger - HTML
Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
Css ligne horizontale ✓ - Forum CSS
Enlever le soulignage des lien. - Forum CSS
Enlever soulignement lien css ✓ - Forum CSS

4 réponses

Réponse 1 / 4

zulfikarhan Messages postés 433 Date d'inscription Statut Membre Dernière intervention 129

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;
}

Réponse 2 / 4

Utilisateur anonyme

Merci :)

Réponse 3 / 4

zulfikarhan Messages postés 433 Date d'inscription Statut Membre Dernière intervention 129

Réponse 4 / 4

Utilisateur anonyme

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 ?

@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208

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>

cabon.contact

En fait je me disais si c'était pas plus simple de prendre une image directement ?

@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208

un background-image?

cabon.contact

Oui voilà, avec un hover, deux images différentes. T'en pense quoi ?

@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208

oui je te fait ça

Discussions similaires

Enlever le soulignement sous les liens en HTML/CSS

indice et exposant en css ?

Enlever trait sous un lien href

CSS/Comment enlever couleur liens ?

Background color css

Votre réponse

Discussions similaires