28172 sujets

CSS et mise en forme, CSS3

::RÉSOLU:: Couleur on hover ne change pas

Bonjour,

Dans le menu de gauche (boites avec images), lorsque je passe la souris (hover et current) sur une boîte, la couleur du background change mais pas le h1 et j'ignore pourquoi. Smiley eek

Quelqu'un peut m'aider?
Merci
Smiley biggrin 

.navBox01{width:279px;}
.navBox01 a{width:269px;}
.navBox02{width:139px;}
.navBox02 a{width:129px;}
.navBox01, .navBox01 a, .navBox02, .navBox02 a{float:left;}
.navBox01, .navBox02{list-style-type:none; border-top:#cfd1d4 solid 1px; border-left:#cfd1d4 solid 1px;}
.navBox01 a, .navBox02 a{display: block; padding:0 0 0 10px; font-size:16px; color:#720101; background-color:#fff; }
.navBox01 a:hover, .navBox01 .current a, .navBox02 a:hover, .navBox02 .current a{ background-color:#720101; color:#fefefe;}
.navBox01 img, .navBox02 img{ margin:10px 0 8px 0; border:#cfd1d4 solid 1px}
.navBox01 h1, .navBox02 h1{min-height:35px; padding:12px 0 0 0; font-size:16px; color:#3d3d3e;}


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Atelier AHR</title>
<link href="css/all.css" rel="stylesheet" type="text/css">
<link href="css/navs2.css" rel="stylesheet" type="text/css">
<link href="css/fonts.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="container01">
  <div id="lang"><a href="#">English</a></div>
  <ul id="nav">
    <li><a href="#">Accueil</a></li>
    <li><a href="#">Produits</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">&Agrave; propos de nous</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <div id="containerLeft">
  	<div id="logo"><img src="img/logo-fr.gif" width="320" height="144" alt=""></div>
<div id="subNav">
   	  <ul class="navBox01">
   	    <li><a href="#"><h1>Disjoncteur</h1><img src="img/disjoncteur-01.jpg" width="256" height="50" alt=""></a>
		</li>   	  
      </ul>
   	  <ul class="navBox02">
   	    <li class="current"><a href="#"><h1>Changeur <br>
   	    de prise</h1><img src="img/changeur-prise-01.jpg" width="118" height="50" alt=""></a>
		</li>   	  
      </ul>
   	  <ul class="navBox02">
   	    <li><a href="#"><h1>Changeur <br>
   	    de prise</h1><img src="img/changeur-prise-01.jpg" width="118" height="50" alt=""></a></li>   	  
      </ul>
   	  <ul class="navBox02">
   	    <li><a href="#"><h1>Changeur <br>
   	    de prise</h1><img src="img/changeur-prise-01.jpg" width="118" height="50" alt=""></a></li>   	  
      </ul>
   	  <ul class="navBox02">
   	    <li><a href="#"><h1>Changeur <br>
   	    de prise</h1><img src="img/changeur-prise-01.jpg" width="118" height="50" alt=""></a></li>   	  
      </ul>
</div>
      <div id="containerLeft02">
        <h1>Services</h1>
        <img src="img/services-01.jpg" alt="">
        <p>2011 marquera la 25i&egrave;me ann&eacute;e d&rsquo;op&eacute;ration d&rsquo;Atelier AHR.  Pr&eacute;sente sur tout le territoire canadien, elle a ses locaux &agrave; Brossard. </p>
        <p>&nbsp;</p>
        <p class="plusLink"><a href="#">Plus...</a></p>
      </div>
  </div>
</div>
</body>
</html>


Lien vers l'exemple ici
Modifié par webberte (29 Aug 2011 - 18:31)
Salut webberte,

Si tu veux changer la couleur du h1, il faut appliquer la pseudo class :hover sur ton <h1> en plus de ton <a>. Sauf que je suppose que tu souhaites voir le h1 changer de couleur dès que tu rentres dans la boite. Dans ce cas, je pense que le plus simple est d'utiliser javascript avec la fonction .hover() de jquery par exemple. Sinon, tu peux aussi donner à ton h1 la même taille que ta boite. Tu survoleras ainsi à la fois ta boite et ton h1.
Salut hchtot,

Je l'avais essayé et ça ne changeais rien. J'aimerais autant que possible m'en tenir au css.
Mon h1 a un min-height. Si je lui donne une hauteur, il descendra mon image.

Merci.
La pseudo class hover s'applique à l'élément lui même mais pas aux éléments qu'il contient. Je pense que le seul moyen de faire ça simplement avec du css, est de donner les mêmes dimensions à ton h1 et à ton a.

Par ailleurs, au lieu de faire :

<ul><li></li></ul>
<ul><li></li></ul>
<ul><li></li></ul>
<ul><li></li></ul>
<ul><li></li></ul>


Tu devrais faire :

<ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
</ul>
Si j'utilise la 2e option que tu me proposes (ce que j'avais fais au début Smiley cligne ) comment je pourrai appliquer un hover sur la boite au complet (ul) pour que le background change? C'était mon dilemne au début. Smiley cligne
jb_gfx,

Peux-tu me donner un exemple en utilisant un de mes styles svp? Je ne sais pas comment l'appliquer.

Merci.
Je l'écris comme ça et ça ne fonctionne pas.

.navBox02 ul:hover{ background-color:#720101; color:#fefefe;}
Ouh la... tu as beaucoup de mal avec les sélecteurs CSS j'ai l'impression.

Ton ul a la classe navBox02 donc c'est .navBox02:hover ou ul.navBox02:hover.
Je suis ici pour apprendre Smiley cligne

Ça donne le même résultat. C'est le texte que je veux faire changer de couleur en même temps que je passe sur le ul.
Salut!
En fait le problème c'est que tu ne lui dit pas dans qu'elle circonstance il doit changer.

Il faut que tu aille sélectionné ton H1 quand ton ul est en hover.
ça donnerais un truc comme ça si je ne me trompe pas:

ul.navBox02:hover h1{
/* et là tu indique les différentes valeurs à appliquer*/
}
Salut,

le problème tient surtout du fait que les propriétés css sur le <h1> prennent le pas sur les propriétés css du a:hover.

Si tu changes tes <h1> par des <p>, tu verras que le style appliqué en hover fonctionnera.

D'autre part, le code de juliesunset fonctionne aussi mais seulement sur le <h1>.
Par conséquent si tu veux, par exemple, ajouter un underline sur le <a> en hover aucun style ne lui sera appliqué.
webberte a écrit :
Je suis ici pour apprendre Smiley cligne

Bonjour,

Pas le temps ni les moyens de regarder plus attentivement ton problème (dans le train sur itruc...), mais quelques remarques tout de même :
Je ne suis pas persuadé que l'utilisation et l'abondance des titres de niveau 1 (h1) soit la meilleur chose à faire, même si ce point peut se discuter Smiley cligne
Une astuce "traine" dans le coin Smiley cligne
Ce même titre de niveau 1 dans une balise de lien, ça pique un peu les yeux...
Pourquoi ?
Ton image logo, sans doute sensée véhiculer une information importante, comporte une alternative textuelle vide : que se passe t-il si l'image ne s'affiche pas ? Rien...c'est dommage non ?
Le petit article qui va bien Smiley cligne

Je repasse plus tard Smiley smile
Fahrenheit a écrit :
Salut,

le problème tient surtout du fait que les propriétés css sur le &lt;h1&gt; prennent le pas sur les propriétés css du a:hover.

Si tu changes tes &lt;h1&gt; par des &lt;p&gt;, tu verras que le style appliqué en hover fonctionnera.

D'autre part, le code de juliesunset fonctionne aussi mais seulement sur le &lt;h1&gt;.
Par conséquent si tu veux, par exemple, ajouter un underline sur le &lt;a&gt; en hover aucun style ne lui sera appliqué.



Oui ! enfin quelqu'un de sérieux dans ce bas monde Smiley cligne
Merci pour tous vos commentaires et suggestions. Je vais essayer tout ça lundi à mon retour au travail et je vous tiens au courant.

Smiley biggrin
Fahrenheit a écrit :
Salut,

le problème tient surtout du fait que les propriétés css sur le &lt;h1&gt; prennent le pas sur les propriétés css du a:hover.

Si tu changes tes &lt;h1&gt; par des &lt;p&gt;, tu verras que le style appliqué en hover fonctionnera.

D'autre part, le code de juliesunset fonctionne aussi mais seulement sur le &lt;h1&gt;.
Par conséquent si tu veux, par exemple, ajouter un underline sur le &lt;a&gt; en hover aucun style ne lui sera appliqué.

Autant pour moi! Je n'avais pas pris le temps de jeter un œil au code html!

EDIT: D'ailleur si j'était toi je prendrais un peu de temps pour revoir ton code html, y'a une petite divite aiguë...
Modifié par juliesunset (19 Aug 2011 - 16:32)
Voici mon nouveau code html et css.

Merci à tous Smiley lol 

<div id="subNav">
  	  <div id="sub01">
  	    <ul>
  	      <li><a href="#">Disjoncteur <img src="img/disjoncteur-01.jpg" alt=""></a></li>
        </ul>
      </div>
  	  <div id="sub02">
  	    <ul>
  	      <li><a href="fr/produits-chargeur-prise.html">Changeur <br>
  	        de prise <img src="img/changeur-prise-01.jpg" lt=""></a></li>
  	      <li class="current"><a href="#">R&eacute;sistance <br>
  	        d'harmonique <img src="img/changeur-prise-01.jpg" width="118" height="50" alt=""></a></li>
  	      <li><a href="#">Compresseur <br>
  	        haute pression <img src="img/changeur-prise-01.jpg" alt=""></a></li>
  	      <li><a href="#">Traitement <br>
  	        d'huile <img src="img/changeur-prise-01.jpg" alt=""></a></li>
  	      <li><a href="#">Enclencheur <br>
  	        synchrone <img src="img/changeur-prise-01.jpg" alt=""></a></li>
  	      <li><a href="#">Condensateur<br>
  	        haute tension <img src="img/changeur-prise-01.jpg" alt=""></a></li>
  	      <li><a href="#">Bassin de<br>
  	        r&eacute;tention d'huile <span><img src="img/changeur-prise-01.jpg" alt=""></span></a></li>
  	      <li><a href="#">D&eacute;charges<br>
  	        partielles <img src="img/changeur-prise-01.jpg" alt=""></a></li>
        </ul>
      </div>
    </div>


#subNav{ float:left; width:280px; margin:0 18px 0 22px; background-color:#fff; border-right:#cfd1d4 solid 1px; border-bottom:#cfd1d4 solid 1px;}
#subNav ul, #subNav li{margin:0; padding:0;}
#subNav, #subNav a{font-family: 'NewsGothicStdMedium', sans-serif; font-size-adjust: 0.49; font-size:16px; }
#sub01 ul, #sub02 ul {list-style-type: none; display:inline;width: 280px; } 
#sub01 li, #sub02 li {float:left; border-top:#cfd1d4 solid 1px; border-left:#cfd1d4 solid 1px;}
#sub01 li {width:280px;}
#sub01 li a {width:270px;}
#sub02 li {width:139px;}
#sub02 li a {width:129px;}
#sub01 li a, #sub02 li a { float:left; padding: 5px 0 8px 10px; display: block; text-decoration: none; color: #3d3d3e;}
#sub01 li a:hover, #sub01 li.current a, #sub02 li a:hover, #sub02 li.current a{background: #720101; color:#fefefe;}
#sub01 a, #sub02 a {color: #333; display: block; line-height:1.05em;}
#sub01 a img, #sub02 a img{padding-top:10px;}
 * html #sub01 li a,  * html #sub02 li a  {  /* make hover effect work in IE */ width: 129px;}
Sujet clos
Aller à