Discussion :

[Jiraiya42]

Bonjour,

J'ai fait ceci pour qu'au passage de la souris la couleur de fond du div et la couleur change lorsque la souris passe dessus mais ça marche pas et je comprends pas pourquoi.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
.note {
margin:0;}
 
.note {
display:block;
width:100px;
height:20px;
background-color:white;
color:#990000;
border-color:#000033;
border-width:1px;
border-style:solid;
font-size:18px;
text-align:center;
text-decoration:none;
margin-left:25px;
margin-right:20px;
margin-top:5px;
font-family:'Comic Sans MS';
}
 
.note a:hover{
background-color:#990033;
color:#ffffff;
}

Si quelqu'un voir l'erreur, ce serait super sympa de m'aider car je vois pas du tout svp (je débute le css)

Merci d'avance

[Linaa]

Et le code HTML ?

[Jiraiya42]

Oups désolé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href="note.php"><p align=center><div class="note">Noter</div></p></a>

[Linaa]

pour qu'au passage de la souris la couleur de fond du div et la couleur change

Tu as defini deux fois la classe .note dans ton CSS.
L'un est forcément écrasé par l'autre.
Le :hover ne fonctionne que pour un lien. (balise <a>)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<p align=center><div class="note"><a href="note.php">Noter</a></div></p>

Cela devrait changer la couleur et le fond du lien! C'est ce que tu veux, ou la div complète ?
Sinon, un idée, tu peux faire une image et au survol, tu changes l'image par une autre ?
Mais pour ce que tu veux faire, c'est aussi possible en JS (avec l'evenement onmouseover).

[Jiraiya42]

En fait j'aimerai bien la div complète parce que ça serait plus esthétique je pense non ?

[Linaa]

Voici un p'tit exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div  style="border:solid 1px #000000; width:100px; background-color:#EEEEEE;" 
		onmouseover="this.style.background='#CCCCCC'" 
		onmouseout="this.style.background='#EEEEEE'">Test</div>

[ilood]

Une autre soluce, mettre le a en display: block et changer la couleur du bckground du a:hover

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div><a href="#">Hello</a></div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
a { display: block; }
a:hover { background: #99FF33; }

[marsupix]

euh...
1) il n'y a que sous IE que les :hover en marchent que sur les liens...
2) on ne met pas une <div> dans un <p>
3) si tous les liens du paragraphes doivent etre centrés et avoir ces propriétés :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
p.note a{
display:block;
width:100px;
height:20px;
background-color:#FFF;
color:#990000;
border-color:1px solid #000033;
font-size:18px;
text-align:center;
text-decoration:none;
margin:0px 20px 5px 25px;
font-family:'Comic Sans MS', sans-serif;   // toujours préciser une famile générale à la fin
}
 
p.note a:hover{
background-color:#990033;
color:#FFF;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<div>
  <p class="note">
    <a href="...">
      lien
    </a>
  </p>
</div>

[Jiraiya42]

Merci à tous pour vos réponses

Marsupix ta solution est nikele sulement dans un autre cas elle ne marche pas:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<td>
      <p class="boutonnote">
 
<!------------------------ Affichage note moyenne --------------------------->
<?
   $select = "SELECT notmoy FROM notes WHERE nummanga = '$nummanga';";
   $res = @mysql_query ($select);
   $row = @mysql_fetch_array($res);
   $totnote = $row['notmoy'];
   echo ''.$totnote.'/10';
?> &nbsp;
<!---------------------------------------------------------------------------->
      </p>
</td>

Et dans ce cas là rien ne se passe ya juste la note écrit normalement, tu as une idée marsupix ou quelqu'un d'autre svp ?

[Jiraiya42]

Personne peut m'aider ?

[Jiraiya42]

Ya personne qui sait faire ça ?

[SpaceFrog]

la hover ne fonctionnant que pour les balise a (de façon universelle) il faut encapsuler l'element dans une balise a ..;
en l'occurence tu es dans un tableau c'est donc pas possible ...

il te faudra passer par javascript avec les evènement onmouseover et onmouseout pour modifier le style ...

[Jiraiya42]

Ah oki merci beaucoup de ta réponse, je vais regarder ça