modification d'un bouton au passage de la souris

4 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu modification d'un bouton au passage de la souris

Message par MlleAlys Mar 6 Nov 2012 - 22:27

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 !


Dernière édition par MlleAlys le Jeu 15 Nov 2012 - 16:47, édité 4 fois
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: modification d'un bouton au passage de la souris

Message par demeter1 Mar 6 Nov 2012 - 23:00

votre hover ne contient aucune image
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: modification d'un bouton au passage de la souris

Message par MlleAlys Mar 6 Nov 2012 - 23:03

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" scratch
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: modification d'un bouton au passage de la souris

Message par MlleAlys Mer 7 Nov 2012 - 23:20

up
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: modification d'un bouton au passage de la souris

Message par MlleAlys Ven 9 Nov 2012 - 0:18

up
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: modification d'un bouton au passage de la souris

Message par Danux Ven 9 Nov 2012 - 1:09

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

Danux
****

Masculin
Messages : 329
Inscrit(e) le : 22/07/2009

https://forum.forumactif.com/forum
Danux a été remercié(e) par l'auteur de ce sujet.

Résolu Re: modification d'un bouton au passage de la souris

Message par MlleAlys Ven 9 Nov 2012 - 18:28

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 ?
MlleAlys a écrit: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 ?
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: modification d'un bouton au passage de la souris

Message par Danux Sam 10 Nov 2012 - 13:04

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
Danux

Danux
****

Masculin
Messages : 329
Inscrit(e) le : 22/07/2009

https://forum.forumactif.com/forum
Danux a été remercié(e) par l'auteur de ce sujet.

Résolu Re: modification d'un bouton au passage de la souris

Message par Anya31 Sam 10 Nov 2012 - 13:06

Danux a écrit: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 ^^
Anya31

Anya31
****

Masculin
Messages : 383
Inscrit(e) le : 10/12/2010

http://touslesloulous.forumactif.com/index.htm
Anya31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: modification d'un bouton au passage de la souris

Message par MlleAlys Dim 11 Nov 2012 - 15:24

Danux a écrit: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 Sad
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: modification d'un bouton au passage de la souris

Message par MlleAlys Jeu 15 Nov 2012 - 16:45

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

résolu
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum