Aller au menu - Aller au contenu

:after:hover

Pour accéder à cette section
Connectez-vous !
connexion_rpx

Résolu Le problème de ce sujet a été résolu

Page 1 
Auteur Message
1 visiteur sur ce sujet (1 Anonyme)
Page 1 
Hors ligne stephane7393 # Posté le 21/02/2012 à 18:15:25

Bonsoir,

Je me demande si il est possible de faire un hover sur un after ?

En gros je voudrais que sa change la couleur de font de mon after uniquement au survol.

Merci
Publicité # Posté le 21/02/2012 à 18:15:25

Hors ligne ronamazona # Posté le 21/02/2012 à 18:43:03
Pseudo classe, non ? ^^
Avatar
Salut,

je ne crois pas que ce soit possible...
Tu aurais plus vite fait de mettre un span.
Ou alors il faut voir du coté PHP ou javascript pour rajouter une class à ton bloc.
Ce qui te permettrais de faire quelque chose comme ça :
Code : CSS
1
2
3
4
5
6
.monelement:after {
   content:'contenu';
}
.monelement.maclass:after {
   background: red;
}

Et encore je ne suis pas sur que ça fonctionne...
Édité le 21/02/2012 à 18:46:52 par ronamazona
Mon site test CSS3/HTML5 : www.frogweb.fr
Vous cherchez à faire un Menu déroulant ?
Image utilisateur Votre problème est résolu ? Cliquez sur le bouton résolu.
Image utilisateur Cliquez aussi sur le message qui vous a aidé pour que les autres trouvent facilement la réponse.
 
Hors ligne warpShadow # Posté le 21/02/2012 à 18:44:00
3ème dan de CSS
Avatar
Flux RSS
close

Ville : Pia
Pays : France métropolitaine
Bonjour,

Au pire, fais le test. ;)
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Défenseur des technologies Microsoft !
Je n'accepte pas les demandes d'amis. Pas d'aide par MP, utilisez le forum.

Les meilleur(e)s du forum XHTML/CSS : AkaiKen, mynfs, Myssdii, Rigs, Ronamazona, MajorShepard, Marsupilamie, Nightmat, Loun4st4ck. Écoutez-les !

Je fais aussi un petit peu de guitare.
 
Hors ligne stephane7393 # Posté le 21/02/2012 à 18:58:33

Je m'en douté un peut et je suis passé par une span. Mais je voudrais que ma span me serve pour affiché le #lightbox et #recherche. Je voudrais me servir de :target mais visiblement je m'embrouille et je vois plus comment faire

Code : CSS
 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
27
28
29
30
31
32
33
34
35
36
37
<style type="text/css">
#lightbox {position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color: #CCA; z-index: 120; opacity:0.5; display: none;}
#recherche {width: 200px; position: fixed; background-color: #DEE7DE; border: 2px solid #000; text-align: center; padding: 10px; border-radius: 12px; box-shadow: 5px 5px 10px 3px #55b948; font-family: comic sans MS; z-index: 150; top: 38%; left: 43%; display: none;}
#recherche input {border: 1px solid #000;; border-radius: 5px;}
#recherche [type=text] {padding-left: 10px;}
#bouton {margin-top: 10px;}

#client {width: 1140px; margin: auto; background-color: #DEE7DE; border: 2px solid #000; text-align: center; padding: 10px; border-radius: 12px; box-shadow: 5px 5px 10px 3px #55b948; font-family: comic sans MS; margin-bottom: 15px;}
#table {overflow: auto; overflow-x: hidden; white-space: nowrap; padding-left: 1px; height: 700px;}
#client table {border: 2px solid #989898; border-collapse: collapse;}
#client caption {font-size: 30px; color: #55b948; text-shadow: 2px 2px 4px #fff; position: relative;}
#client thead {font-size: 13px; background-color: #F8CE51;}
#client thead {border-bottom: 1px solid #000;}
#client tbody {font-size: 13px;}
#client tbody tr td:first-child {border-right: 1px solid #000; background-color: #00c8ff;}
#client tbody tr:nth-child(odd) {background-color: #97C44D;}
#client tbody tr:hover {background-color: #999;}
#client caption span {
  display: block;
  position: absolute;
  margin-left: 50px;
  margin-top: -40px;
  padding: 3px 7px;
  text-align: center;
  color: #fff;
  border-radius: 9px;
  font-size: 15px;
  height: 18px;
  line-height: 18px;
  vertical-align: middle;
  cursor: pointer;
  background-image: -moz-linear-gradient(top , #DE685B 0%, #F3230C 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .17), 0 1px 1px rgba(0, 0, 0, .2);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .2);}
#client caption span:hover {background-image: -moz-linear-gradient(top , rgba(222,104,91,0.6) 0%, rgba(243,35,12,0.6) 100%);}
#client caption span:targer #recherche {display: block;}
</style>


Code : PHP
 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<div id="lightbox"></div>
<div id="recherche">

<div><input type="text" placeholder="Contrat" /></div>
<div><input type="text" placeholder="Mission" /></div>
<div><input type="text" placeholder="Client" /></div>
<div><input type="text" placeholder="Code postal" /></div>
<div><input type="text" placeholder="Ville" /></div>
<div><input type="text" placeholder="Code Produit" /></div>
<div><input type="text" placeholder="Temps" /></div>
<div><input type="text" placeholder="Montant" /></div>

<button id="bouton" type="submit" name="submit">Rechercher !!</button>

</div>


<div id="client">

<div id="table">
<table>

<caption>Liste des clients en &eacute;lectricit&eacute;<a href="#recherche"><span>Rechercher</span></a></caption>

<thead>
  <tr>
    <th>Id</th>
    <th>Contrat</th>
    <th>Mission</th>
    <th>Client</th>
    <th>Code Postal</th>
    <th>Ville</th>
    <th>Produit</th>
    <th>Temps Prevu</th>
    <th>Montant</th>
  </tr>
</thead>

<tbody>
<?php
$u = 1;
$requete_cra = mysql_query("select * from client");
while($ligne = mysql_fetch_array($requete_cra)) {
extract($ligne);
echo("
  <tr>
    <td>$u</td>
    <td>$contrat</td>
    <td>$mission</td>
    <td>$client</td>
    <td>$code_postal</td>
    <td>$ville</td>
    <td>$produit</td>
    <td>$temps_prevu</td>
    <td>$montant</td>
  </tr>
");
$u++;
}
?>
</tbody>

</table>
</div>

</div>
Édité le 21/02/2012 à 19:01:19 par stephane7393
Hors ligne AkaiKen # Posté le 21/02/2012 à 19:48:35
En amélioration constante
Avatar
close

Ville : Montmélian
Pays : France métropolitaine
Pour l'avoir testé, je confirme, on ne peut pas faire de :hover sur un :after (ce qui se tient : comment pourrait-on passer sa souris sur un élément qui n'existe pas dans le html ?). En revanche, on peut modifier le :after au :hover de son élément-père. Donc .truc:hover:after modifie techniquement le :after de .truc lorsque la souris passe sur .truc.


(oh, et au fait, echo "bla $variable", c'est très mauvais, ça plombe les performances, je te conseille echo 'bla' . $variable)
Édité le 21/02/2012 à 19:48:58 par AkaiKen
- Les liens pratiques sur html et css que je glane au gré du web.
- Je ne réponds pas aux demandes techniques par MP, le forum est fait pour ça. Et je ne réponds pas aux demandes d'amitié si je ne vous connais pas.
- Mozilla != Firefox, Java != JavaScript/js, ça != sa, learn the difference, it could save my mental health.
- Répondre "t'embête pas, fais un tableau" à n'importe quelle question c'est comme utiliser une cuillère dans toutes les situations. Parfois, ça sert. Parfois.
 
Hors ligne stephane7393 # Posté le 21/02/2012 à 20:34:30

Merci du conseille mais c'est pas le problème qui me préoccupe pour l'instant. Effectivement sa me paraissait pas possible non plus mais bon sa coute de rien de demandé des fois que.

Sinon personne a une idée pour ce que je veux faire ?
Hors ligne ronamazona # Posté le 21/02/2012 à 20:55:01
Pseudo classe, non ? ^^
Avatar
Citation : stephane7393
Merci du conseille mais c'est pas le problème qui me préoccupe pour l'instant. Effectivement sa me paraissait pas possible non plus mais bon sa coute de rien de demandé des fois que.
Sinon personne a une idée pour ce que je veux faire ?


Akaiken t'a donné la solution...
Code : HTML
1
<h1 class="h1">Texte</h1>

Code : CSS
1
2
3
4
5
6
.h1:after {
  content:"after"
}
.h1:hover:after {
  color:red
}


(Qu'est-ce qu'ils ont tous à lire entre les lignes ? o_O )
Mon site test CSS3/HTML5 : www.frogweb.fr
Vous cherchez à faire un Menu déroulant ?
Image utilisateur Votre problème est résolu ? Cliquez sur le bouton résolu.
Image utilisateur Cliquez aussi sur le message qui vous a aidé pour que les autres trouvent facilement la réponse.
 
Hors ligne stephane7393 # Posté le 21/02/2012 à 20:59:19

oui mais sa c'est réglé comme problème, j'en suis plus là.

Je voudrais que quand je clique sur la span sa affiche la lightbox
Hors ligne ronamazona # Posté le 21/02/2012 à 21:01:08
Pseudo classe, non ? ^^
Avatar
Ah d'accord j'ai pas suivi... Au temps pour moi.
Et bien tu mets un <a> dans ton span...
Ou alors tu utilise target.
Édité le 21/02/2012 à 21:03:34 par ronamazona
Mon site test CSS3/HTML5 : www.frogweb.fr
Vous cherchez à faire un Menu déroulant ?
Image utilisateur Votre problème est résolu ? Cliquez sur le bouton résolu.
Image utilisateur Cliquez aussi sur le message qui vous a aidé pour que les autres trouvent facilement la réponse.
 
Hors ligne stephane7393 # Posté le 21/02/2012 à 21:03:20

oui jusque la j'avais plus ou moins comprit qu'il fallait une balise a pour la span et utilisé target mais c'est là ou je suis perdu justement
Hors ligne ronamazona # Posté le 21/02/2012 à 21:07:39
Pseudo classe, non ? ^^
Avatar
Cette réponse a aidé l'auteur du sujet Cette réponse a aidé l'auteur du sujet
Code : CSS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
span {
  display:block;
  width:100px;
  height:100px;
  background: red;
}
#target {
  display:none;
}
#target:target {
  display:block;
}

Code : HTML
1
2
<span><a href="#target">Lien</a></span>
<span id="target">target</span>
Mon site test CSS3/HTML5 : www.frogweb.fr
Vous cherchez à faire un Menu déroulant ?
Image utilisateur Votre problème est résolu ? Cliquez sur le bouton résolu.
Image utilisateur Cliquez aussi sur le message qui vous a aidé pour que les autres trouvent facilement la réponse.
 
Hors ligne stephane7393 # Posté le 21/02/2012 à 21:16:56

Ok sa marche mais mon problème il faut que le face un target sur lightbox et recherche.

Code : PHP
  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
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
<style type="text/css">
#lightbox {display: none;}
#recherche {display: none;}
#lightbox:target {position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color: #CCA; z-index: 120; opacity: 0.5; display: block;}
#recherche:target {width: 200px; position: fixed; background-color: #DEE7DE; border: 2px solid #000; text-align: center; padding: 10px; border-radius: 12px; box-shadow: 5px 5px 10px 3px #55b948; font-family: comic sans MS; z-index: 150; top: 38%; left: 43%; display: block;}
#recherche input {border: 1px solid #000;; border-radius: 5px;}
#recherche [type=text] {padding-left: 10px;}
#bouton {margin-top: 10px;}

#client {width: 1140px; margin: auto; background-color: #DEE7DE; border: 2px solid #000; text-align: center; padding: 10px; border-radius: 12px; box-shadow: 5px 5px 10px 3px #55b948; font-family: comic sans MS; margin-bottom: 15px;}
#table {overflow: auto; overflow-x: hidden; white-space: nowrap; padding-left: 1px; height: 700px;}
#client table {border: 2px solid #989898; border-collapse: collapse;}
#client caption {font-size: 30px; color: #55b948; text-shadow: 2px 2px 4px #fff; position: relative;}
#client thead {font-size: 13px; background-color: #F8CE51;}
#client thead {border-bottom: 1px solid #000;}
#client tbody {font-size: 13px;}
#client tbody tr td:first-child {border-right: 1px solid #000; background-color: #00c8ff;}
#client tbody tr:nth-child(odd) {background-color: #97C44D;}
#client tbody tr:hover {background-color: #999;}
#client caption span {
  display: block;
  position: absolute;
  margin-left: 50px;
  margin-top: -40px;
  padding: 3px 7px;
  text-align: center;
  color: #fff;
  border-radius: 9px;
  font-size: 15px;
  height: 18px;
  line-height: 18px;
  vertical-align: middle;
  cursor: pointer;
  background-image: -moz-linear-gradient(top , #DE685B 0%, #F3230C 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .17), 0 1px 1px rgba(0, 0, 0, .2);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .2);}
#client caption span:hover {background-image: -moz-linear-gradient(top , rgba(222,104,91,0.6) 0%, rgba(243,35,12,0.6) 100%);}
</style>

<div id="lightbox"></div>
<div id="recherche">

<div><input type="text" placeholder="Contrat" /></div>
<div><input type="text" placeholder="Mission" /></div>
<div><input type="text" placeholder="Client" /></div>
<div><input type="text" placeholder="Code postal" /></div>
<div><input type="text" placeholder="Ville" /></div>
<div><input type="text" placeholder="Code Produit" /></div>
<div><input type="text" placeholder="Temps" /></div>
<div><input type="text" placeholder="Montant" /></div>

<button id="bouton" type="submit" name="submit">Rechercher !!</button>

</div>


<div id="client">

<div id="table">
<table>

<caption>Liste des clients en &eacute;lectricit&eacute;<a href="#recherche"><span>Rechercher</span></a></caption>

<thead>
  <tr>
    <th>Id</th>
    <th>Contrat</th>
    <th>Mission</th>
    <th>Client</th>
    <th>Code Postal</th>
    <th>Ville</th>
    <th>Produit</th>
    <th>Temps Prevu</th>
    <th>Montant</th>
  </tr>
</thead>

<tbody>
<?php
$u = 1;
$requete_cra = mysql_query("select * from client");
while($ligne = mysql_fetch_array($requete_cra)) {
extract($ligne);
echo("
  <tr>
    <td>$u</td>
    <td>$contrat</td>
    <td>$mission</td>
    <td>$client</td>
    <td>$code_postal</td>
    <td>$ville</td>
    <td>$produit</td>
    <td>$temps_prevu</td>
    <td>$montant</td>
  </tr>
");
$u++;
}
?>
</tbody>

</table>
</div>

</div>
Édité le 21/02/2012 à 21:20:34 par stephane7393
Hors ligne ronamazona # Posté le 21/02/2012 à 21:30:02
Pseudo classe, non ? ^^
Avatar
Cette réponse a aidé l'auteur du sujet Cette réponse a aidé l'auteur du sujet
Ah oui mais non. A l'impossible nul n'est tenu...
Tu ne peux pas mettre deux url dans un href.
Ce que tu peux faire par contre c'est mettre lightbox et recherche dans un même bloc. Et c'est lui qui sera target.
Mon site test CSS3/HTML5 : www.frogweb.fr
Vous cherchez à faire un Menu déroulant ?
Image utilisateur Votre problème est résolu ? Cliquez sur le bouton résolu.
Image utilisateur Cliquez aussi sur le message qui vous a aidé pour que les autres trouvent facilement la réponse.
 
Hors ligne stephane7393 # Posté le 21/02/2012 à 21:36:17

oui l'idée est bonne mais par compte sa ne fonctionne plus pour la lightbox

En fait j'avais pas enlevé target de lightbox et recherche sinon sa marche, merci a toi. je m'en serais pas sortie tout seul je croix
Édité le 21/02/2012 à 21:38:46 par stephane7393
Hors ligne ronamazona # Posté le 21/02/2012 à 21:51:32
Pseudo classe, non ? ^^
Avatar
Content pour toi ^^
Bon courage pour la suite.
Mon site test CSS3/HTML5 : www.frogweb.fr
Vous cherchez à faire un Menu déroulant ?
Image utilisateur Votre problème est résolu ? Cliquez sur le bouton résolu.
Image utilisateur Cliquez aussi sur le message qui vous a aidé pour que les autres trouvent facilement la réponse.
 
Hors ligne Masteur-Codeur # Posté le 22/02/2012 à 12:38:29
Patientez s'il vous plaît.
Salut, euh... C'est quoi un after ? On n'a pas vu ça dans le cours de Mathéo
[signature modérée]
 
Hors ligne warpShadow # Posté le 22/02/2012 à 14:17:53
3ème dan de CSS
Avatar
Flux RSS
close

Ville : Pia
Pays : France métropolitaine
Le cours de Matheo est pour débuter, il n'est pas exhaustif, surtout sur les sélecteurs.

:after est donc une pseudo-classe qui permet d'ajouter des propriétés après un élément, comme ":before" permet de le faire avant.

http://www.yoyodesign.org/doc/w3c/css2 [...] ore-and-after
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Défenseur des technologies Microsoft !
Je n'accepte pas les demandes d'amis. Pas d'aide par MP, utilisez le forum.

Les meilleur(e)s du forum XHTML/CSS : AkaiKen, mynfs, Myssdii, Rigs, Ronamazona, MajorShepard, Marsupilamie, Nightmat, Loun4st4ck. Écoutez-les !

Je fais aussi un petit peu de guitare.
 
Hors ligne Masteur-Codeur # Posté le 23/02/2012 à 14:02:59
Patientez s'il vous plaît.
Mais il est génial ton lien !!!
je suis allé dans le sommaire général et il y a plein de trucs qu'on n'a pas vu dans le cours de Mathieu !!! Si un jour je cherche à approfondir mes connaissances j'irais la dessus (mais je ne pense pas, il y a tout sur le css et le html sur le sdz...)
[signature modérée]
 
Hors ligne warpShadow # Posté le 23/02/2012 à 14:40:52
3ème dan de CSS
Avatar
Flux RSS
close

Ville : Pia
Pays : France métropolitaine
Il n'y a pas tout non. ;) Tu trouveras des centaines de choses au-dehors, notemment sur alsacreations et pompage.net
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Défenseur des technologies Microsoft !
Je n'accepte pas les demandes d'amis. Pas d'aide par MP, utilisez le forum.

Les meilleur(e)s du forum XHTML/CSS : AkaiKen, mynfs, Myssdii, Rigs, Ronamazona, MajorShepard, Marsupilamie, Nightmat, Loun4st4ck. Écoutez-les !

Je fais aussi un petit peu de guitare.
 
Hors ligne Masteur-Codeur # Posté le 23/02/2012 à 23:54:23
Patientez s'il vous plaît.
C'est quoi les alsacréamachin et l'autre truc ? :D (vous trouvez, vous, que je suis intéressé ? :p )
Édité le 23/02/2012 à 23:55:21 par Masteur-Codeur
[signature modérée]
 
Hors ligne warpShadow # Posté le 24/02/2012 à 00:14:30
3ème dan de CSS
Avatar
Flux RSS
close

Ville : Pia
Pays : France métropolitaine
http://www.alsacreations.com/
http://www.pompage.net/
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Défenseur des technologies Microsoft !
Je n'accepte pas les demandes d'amis. Pas d'aide par MP, utilisez le forum.

Les meilleur(e)s du forum XHTML/CSS : AkaiKen, mynfs, Myssdii, Rigs, Ronamazona, MajorShepard, Marsupilamie, Nightmat, Loun4st4ck. Écoutez-les !

Je fais aussi un petit peu de guitare.
 
Hors ligne AkaiKen # Posté le 24/02/2012 à 07:37:29
En amélioration constante
Avatar
close

Ville : Montmélian
Pays : France métropolitaine
Citation : Ros@lie
C'est quoi les alsacréamachin et l'autre truc ? :D (vous trouvez, vous, que je suis intéressé ? :p )


Euh. Eeet chercher un peu avant de répondre en traitant ces sites de machin et de truc ? Non ? Pas possible ?

warp, t'es trop gentil sur ce coup.
- Les liens pratiques sur html et css que je glane au gré du web.
- Je ne réponds pas aux demandes techniques par MP, le forum est fait pour ça. Et je ne réponds pas aux demandes d'amitié si je ne vous connais pas.
- Mozilla != Firefox, Java != JavaScript/js, ça != sa, learn the difference, it could save my mental health.
- Répondre "t'embête pas, fais un tableau" à n'importe quelle question c'est comme utiliser une cuillère dans toutes les situations. Parfois, ça sert. Parfois.
 
Hors ligne warpShadow # Posté le 24/02/2012 à 07:56:50
3ème dan de CSS
Avatar
Flux RSS
close

Ville : Pia
Pays : France métropolitaine
C'est comme les mikado, c'est la p'tite faiblesse qui me perdra.
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Défenseur des technologies Microsoft !
Je n'accepte pas les demandes d'amis. Pas d'aide par MP, utilisez le forum.

Les meilleur(e)s du forum XHTML/CSS : AkaiKen, mynfs, Myssdii, Rigs, Ronamazona, MajorShepard, Marsupilamie, Nightmat, Loun4st4ck. Écoutez-les !

Je fais aussi un petit peu de guitare.
 

Retour au forum "HTML / CSS" ou à la liste des forums

Pour accéder à cette section
Connectez-vous !
connexion_rpx