je cherche à reproduire une fonction de l'interface de PhpMyAdmin : les
lignes d'un tableau de résultats changent de couleur de fond lorsqu'on
les survole et lorsque l'on clique deussus.
PhpMyAdmin utilise js pour faire cela.
Mais je me demande si l'on peut faire la même avec les seules css (ou
toute autre technique permettant de se passer de js) ?
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire
Veuillez sélectionner un problème
Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Julien Gautier a ecrit :
ep15SANS wrote:
> Le 27/05/2004 09:58, Julien Gautier a écrit : > > lignes d'un tableau de résultats changent de couleur de fond lorsqu'on > > les survole et lorsque l'on clique deussus. > > > mabalise.maclass:hover { > color: #ma_couleur; > background-color: #ma_couleur_de_fond; > etc. > }
ok, merci.
Mais, sauf erreur, cela ne fait pas changer la couleur si l'on clique, si ?
Non seulement l'over
j'aurais aimé :
- repos : couleur x - over : couleur y - clic (sans url): couleur z (qui se maintient) - reclic : retour au repos.
peut-on le faire sans js ?
Bien sûr puisque tout est prévu dans les css :-)) ou presque non, au clic la couleur ne sera pas gardée sans JS
donc, en simple de chez pas-trop-compliqué :
.truc { style de base } .truc:hover { style au sur-vol dont cursor:pointer; } .truc:actived { style au clicottage }
et bien respecter l'ordre des déclarations (normal, over, click)
et pour la couleur maintenue :
var tr=true; function change(){ if(tr) document.getElementById('rangee').className='truc2'; else document.getElementById('rangee').className='truc'; tr = !tr; }
.truc { style de base } .truc2 { autre style qd cliqué 1er } .truc:hover, .truc2:hover { style au sur-vol } .truc:actived, .truc2.actived { style au clicottage }
> Le 27/05/2004 09:58, Julien Gautier a écrit :
> > lignes d'un tableau de résultats changent de couleur de fond lorsqu'on
> > les survole et lorsque l'on clique deussus.
> >
> mabalise.maclass:hover {
> color: #ma_couleur;
> background-color: #ma_couleur_de_fond;
> etc.
> }
ok, merci.
Mais, sauf erreur, cela ne fait pas changer la couleur si l'on clique,
si ?
Non seulement l'over
j'aurais aimé :
- repos : couleur x
- over : couleur y
- clic (sans url): couleur z (qui se maintient)
- reclic : retour au repos.
peut-on le faire sans js ?
Bien sûr puisque tout est prévu dans les css :-))
ou presque
non, au clic la couleur ne sera pas gardée sans JS
donc, en simple de chez pas-trop-compliqué :
.truc { style de base }
.truc:hover { style au sur-vol dont cursor:pointer; }
.truc:actived { style au clicottage }
et bien respecter l'ordre des déclarations
(normal, over, click)
et pour la couleur maintenue :
var tr=true;
function change(){
if(tr) document.getElementById('rangee').className='truc2';
else document.getElementById('rangee').className='truc';
tr = !tr;
}
.truc { style de base }
.truc2 { autre style qd cliqué 1er }
.truc:hover, .truc2:hover { style au sur-vol }
.truc:actived, .truc2.actived { style au clicottage }
> Le 27/05/2004 09:58, Julien Gautier a écrit : > > lignes d'un tableau de résultats changent de couleur de fond lorsqu'on > > les survole et lorsque l'on clique deussus. > > > mabalise.maclass:hover { > color: #ma_couleur; > background-color: #ma_couleur_de_fond; > etc. > }
ok, merci.
Mais, sauf erreur, cela ne fait pas changer la couleur si l'on clique, si ?
Non seulement l'over
j'aurais aimé :
- repos : couleur x - over : couleur y - clic (sans url): couleur z (qui se maintient) - reclic : retour au repos.
peut-on le faire sans js ?
Bien sûr puisque tout est prévu dans les css :-)) ou presque non, au clic la couleur ne sera pas gardée sans JS
donc, en simple de chez pas-trop-compliqué :
.truc { style de base } .truc:hover { style au sur-vol dont cursor:pointer; } .truc:actived { style au clicottage }
et bien respecter l'ordre des déclarations (normal, over, click)
et pour la couleur maintenue :
var tr=true; function change(){ if(tr) document.getElementById('rangee').className='truc2'; else document.getElementById('rangee').className='truc'; tr = !tr; }
.truc { style de base } .truc2 { autre style qd cliqué 1er } .truc:hover, .truc2:hover { style au sur-vol } .truc:actived, .truc2.actived { style au clicottage }
À mon grand étonnement, CSS 2 ne limite pas ces pseudo-classes aux liens. Merci aussi à Laurent qui m'a fait découvrir « :focus » ; c'est tout un monde qui s'ouvre à moi !
-- Hervé
(Saleté de bouquin !)
@SM a écrit :
.truc:actived { style au clicottage }
Hmm... tu voulais dire « :active » ?
À mon grand étonnement, CSS 2 ne limite pas ces pseudo-classes aux
liens. Merci aussi à Laurent qui m'a fait découvrir « :focus » ; c'est
tout un monde qui s'ouvre à moi !
À mon grand étonnement, CSS 2 ne limite pas ces pseudo-classes aux liens. Merci aussi à Laurent qui m'a fait découvrir « :focus » ; c'est tout un monde qui s'ouvre à moi !
-- Hervé
(Saleté de bouquin !)
Pierre Goiffon
Hervé wrote:
À mon grand étonnement, CSS 2 ne limite pas ces pseudo-classes aux liens.
Si j'ai bonne mémoire, IE pour :hover si, non ?
-- Pour me répondre par mail privé, merci de supprimer _NOSPAM_ de mon adresse.
Un grand merci à OE Quote Fix pour rendre OE utilisable :) => http://home.in.tum.de/~jain/software/oe-quotefix/
Hervé wrote:
À mon grand étonnement, CSS 2 ne limite pas ces pseudo-classes aux
liens.
Si j'ai bonne mémoire, IE pour :hover si, non ?
--
Pour me répondre par mail privé, merci de supprimer _NOSPAM_ de mon
adresse.
Un grand merci à OE Quote Fix pour rendre OE utilisable :)
=> http://home.in.tum.de/~jain/software/oe-quotefix/
À mon grand étonnement, CSS 2 ne limite pas ces pseudo-classes aux liens.
Si j'ai bonne mémoire, IE pour :hover si, non ?
-- Pour me répondre par mail privé, merci de supprimer _NOSPAM_ de mon adresse.
Un grand merci à OE Quote Fix pour rendre OE utilisable :) => http://home.in.tum.de/~jain/software/oe-quotefix/
Christophe PEREZ
Le Thu, 27 May 2004 22:14:08 +0200, Pierre Goiffon a écrit:
Si j'ai bonne mémoire, IE pour :hover si, non ?
Oui, sauf avec l'ajout de ce merveilleux IE7(*) dont je ne cesserai de vanter les mérites ;-)
(*) Non, IE7 n'est pas le successeur de IE6, mais un logiciel complémentaire, à mettre côté serveur (appel par feuille CSS) qui aide grandement IE6/5.5 à comprendre les "vrais" standards.
-- Christophe PEREZ Écrivez moi sans _faute !
Le Thu, 27 May 2004 22:14:08 +0200, Pierre Goiffon a écrit:
Si j'ai bonne mémoire, IE pour :hover si, non ?
Oui, sauf avec l'ajout de ce merveilleux IE7(*) dont je ne cesserai de
vanter les mérites ;-)
(*) Non, IE7 n'est pas le successeur de IE6, mais un logiciel
complémentaire, à mettre côté serveur (appel par feuille CSS) qui
aide grandement IE6/5.5 à comprendre les "vrais" standards.
Le Thu, 27 May 2004 22:14:08 +0200, Pierre Goiffon a écrit:
Si j'ai bonne mémoire, IE pour :hover si, non ?
Oui, sauf avec l'ajout de ce merveilleux IE7(*) dont je ne cesserai de vanter les mérites ;-)
(*) Non, IE7 n'est pas le successeur de IE6, mais un logiciel complémentaire, à mettre côté serveur (appel par feuille CSS) qui aide grandement IE6/5.5 à comprendre les "vrais" standards.
-- Christophe PEREZ Écrivez moi sans _faute !
julien.gautier
@SM wrote:
var tr=true; function change(){ if(tr) document.getElementById('rangee').className='truc2'; else document.getElementById('rangee').className='truc'; tr = !tr; }
.truc { style de base } .truc2 { autre style qd cliqué 1er } .truc:hover, .truc2:hover { style au sur-vol } .truc:actived, .truc2.actived { style au clicottage }
(Julien Gautier), le 27 mai 2004 22:55:35, écrivait ceci:
> - clic (sans url): couleur z
mabalise.maclass:focus
correction :active...
> (qui se maintient)
La faut intervenir par DOM+JS
bon, c'est ce que je craignais.
Ben oui, les pseudo classe ne s'appliquent que lors de l'événement, si tu veut garder un état en mémoire, la faut jouer avec DOM.
=?ISO-8859-1?Q?Hervé?= a ecrit :
@SM a écrit : > .truc:actived { style au clicottage }
Hmm... tu voulais dire « :active » ?
Bien évidemment ! ;-))
À mon grand étonnement, CSS 2 ne limite pas ces pseudo-classes aux liens. Merci aussi à Laurent qui m'a fait découvrir « :focus » ; c'est tout un monde qui s'ouvre à moi !
Oui, caisse que cé ce focus ? j'va vouère tout d'go.
@SM a écrit :
> .truc:actived { style au clicottage }
Hmm... tu voulais dire « :active » ?
Bien évidemment ! ;-))
À mon grand étonnement, CSS 2 ne limite pas ces pseudo-classes aux
liens. Merci aussi à Laurent qui m'a fait découvrir « :focus » ; c'est
tout un monde qui s'ouvre à moi !
Oui, caisse que cé ce focus ? j'va vouère tout d'go.
@SM a écrit : > .truc:actived { style au clicottage }
Hmm... tu voulais dire « :active » ?
Bien évidemment ! ;-))
À mon grand étonnement, CSS 2 ne limite pas ces pseudo-classes aux liens. Merci aussi à Laurent qui m'a fait découvrir « :focus » ; c'est tout un monde qui s'ouvre à moi !
Oui, caisse que cé ce focus ? j'va vouère tout d'go.
