modification d'un bouton au passage de la souris

[MlleAlys]

Bonjour/bonsoir !

J'essaye de changer mes boutons fixes par des backgrounds changeant de position au passage de la souris. On m'a déjà aidé pour commencer avec "supprimer" ( https://forum.forumactif.com/t340678-bouton-changeant-au-passage-de-la-souris ) et, faisant désormais attention, j'ai fait de même avec "éditer", "Mp", et "profil", aucun soucis de ce côté.

Je suis alors passée aux boutons "Nouveau sujet", et là, j'ai remarqué que, si c'était toujours la même image, c'était par contre beaucoup de références différentes... Donc, première question :

=> Y a t il un moyen pour récupérer toutes ces références sans devoir parcourir à chaque fois les pages du forum pour les rechercher ? ^^"

De plus, en essayant, je me suis rendue compte que ça ne marchait pas bien pour toutes : certains restent "bloqués" en position "hover", même quand la souris n'est pas dessus... alors que c'est exactement le même code que les autres, pour lesquels ça fonctionne ><" ! Par exemple sur cette page de mon forum, le "Nouveau sujet" du haut est bloqué, alors que celui du bas fonctionne...

=> Pourquoi, et comment corriger ?

Voici mon code css concerné :

Code:

/*nouveau sujet*/
#Newtopic, #one, #i_post, #i_post1{
  background-image:url('http://i46.servimg.com/u/f46/12/56/43/35/nouvea10.png');
  width:150px;
  height:75px;
  background-position : left top;}
#Newtopic, #one, #i_post, #i_post1:hover{
  background-position : left bottom;}

.i_msg_newpost{
  background-image:url('http://i46.servimg.com/u/f46/12/56/43/35/nouvea10.png');
  width:150px;
  height:75px;
  background-position : left top;}
.i_msg_newpost:hover{
  background-position : left bottom;}

Merci d'avance !

[demeter1]

votre hover ne contient aucune image

[MlleAlys]

non, les deux boutons sont sur la même image, et il n'y a que la position qui change... normalement, ce code a fonctionné pour tous les autres, y aurait-il une raison pour qu'il ne fonctionne pas ici ?
D'ailleurs, le bouton est bien bloqué en position "hover"

[MlleAlys]

up

[MlleAlys]

up

[Danux]

Bonjour,

C'est normal, vous avez oublier d'indiquer :hover à chaque balide dans votre code CSS :

Code:

#Newtopic, #one, #i_post, #i_post1:hover{
  background-position : left bottom;}

Ici : seul #i_post1 aura le fond changeant au survol.

Pour corriger cela, vous devez préciser :hover à chaque balise (et non juste en fin de ligne, sinon ça ne marche pas) !

Code:

#Newtopic:hover , #one:hover , #i_post:hover , #i_post1:hover {
  background-position : left bottom;}

[MlleAlys]

aaaaaaaaah ! je ne savais pas mais effectivement réflexion faite c'est logique !
merci ! =D


et concernant la première question, quelqu'un aurait-il une idée ?

Je suis alors passée aux boutons "Nouveau sujet", et là, j'ai remarqué que, si c'était toujours la même image, c'était par contre beaucoup de références différentes... Donc, première question :

=> Y a t il un moyen pour récupérer toutes ces références sans devoir parcourir à chaque fois les pages du forum pour les rechercher ? ^^"

=> Dans le même ordre d'idées, concernant le bouton "Répondre au message", je n'ai trouvé qu'une seule référence, quelles est (sont) l(es) autres(s) (il s'agit les boutons "répondre" en bas des sujets, et de ceux de la messagerie personnelle) ? Ou comment la (les) trouver ?

[Danux]

Bonjour,

Il n'y a pas de liste pour tous les codes CSS malheureusement. ^^

Pour le bouton répondre : .i_reply { css }
Et dans la messagerie :
.i_msg_newpost { css } (nouveau message)
En revanche, il n'y a pas de code direct pour le bouton de réponse, mais vous pouvez toujours essayer :
.topic-actions .buttons .post-icon a[href*="privmsg?mode=reply"] { css }

Cordialement

[Anya31]

Bonjour,

Il n'y a pas de liste pour tous les codes CSS malheureusement. ^^

Pour le bouton répondre : .i_reply { css }
Et dans la messagerie :
.i_msg_newpost { css } (nouveau message)
En revanche, il n'y a pas de code direct pour le bouton de réponse, mais vous pouvez toujours essayer :
.topic-actions .buttons .post-icon a[href*="privmsg?mode=reply"] { css }

Cordialement

oui c'est bien dommage ^^

[MlleAlys]

En revanche, il n'y a pas de code direct pour le bouton de réponse, mais vous pouvez toujours essayer :
.topic-actions .buttons .post-icon a[href*="privmsg?mode=reply"] { css }

Merci pour la réponse ! mais j'ai essayé et ça ne fonctionne pas

[MlleAlys]

Le sujet ID/classes des boutons par X-Rayane a eu plus de succès que le mien, mais la réponse est là ! ^^