HTML - CSS display et :hover
titouflout
-
Olivier -
Olivier -
Bonjour,
Bien que je ne sois pas mauvais en XHTML/CSS, je suis tombé sur un probleme...
Je souhaite créer un menu. Composé de plusieurs partie (plutôt évident..). Ces parties, une fois la souris placée dessus, seront censée afficher le titre de cette partie.
En gros, on a:
HTML:
<div class="la partie en question"></div>
<h1>le titre de la partie</h1>
CSS:
.la partie en question:hover
{
display: C'est LA que ça coince, j'aimerais que le display sois actif sur le h1 et non pas sur la première div...
}
Comment faire? Dois-je utiliser le javascript ? ..avec lequel je n'y connais rien d'ailleurs.
J'aimerais (si possible) trouver une solution dans mes cordes (XHTML/CSS)
Merci de m'aider.
Bien que je ne sois pas mauvais en XHTML/CSS, je suis tombé sur un probleme...
Je souhaite créer un menu. Composé de plusieurs partie (plutôt évident..). Ces parties, une fois la souris placée dessus, seront censée afficher le titre de cette partie.
En gros, on a:
HTML:
<div class="la partie en question"></div>
<h1>le titre de la partie</h1>
CSS:
.la partie en question:hover
{
display: C'est LA que ça coince, j'aimerais que le display sois actif sur le h1 et non pas sur la première div...
}
Comment faire? Dois-je utiliser le javascript ? ..avec lequel je n'y connais rien d'ailleurs.
J'aimerais (si possible) trouver une solution dans mes cordes (XHTML/CSS)
Merci de m'aider.
A voir également:
- Display hover
- Display fusion - Télécharger - Divers Utilitaires
- Wireless display edenwood iphone - Forum TV & Vidéo
- Connecter iphone sur tv sans fil ✓ - Forum iPhone
- Display name c'est quoi - Forum Mobile
- Display going to sleep - Forum Windows
10 réponses
salut
pour afficher le titre de chaque partie il suffit d'ajouter l'attribut ''title"
@+..
cdlt
pour afficher le titre de chaque partie il suffit d'ajouter l'attribut ''title"
exemple:
<h1 title="la premiére partie">la partie I<h2>
@+..
cdlt
Humm.. en fait non, je ne souhaite pas du tout créer une infobulle..
Je souhaite afficher une balise de type <h1>
C'est là que résite la difficulté
Je souhaite afficher une balise de type <h1>
C'est là que résite la difficulté
Tu peu aussi faire cela :
En gros , ca veut dire : Les h1 de nomdetapartie .
nomdetapartie h1 :hover
{
display:
}
En gros , ca veut dire : Les h1 de nomdetapartie .
Bon, on va carrément lacher quelques lignes de code...
HTML :
<div class="first"></div> <--! Voici la balise dans la quelle passe la souris -->
<h5 class="test">exemple</h5> <--! Cette balise est celle qui s'affiche lors du passage de la souris sur la div-->
CSS :
h5
{
color: white;
display: none;
}
.test .first:hover
{
display: inline;
}
Voilà comment j'applique ton conseil Chupachups23, mais ça ne marche pas.. le texte reste caché
HTML :
<div class="first"></div> <--! Voici la balise dans la quelle passe la souris -->
<h5 class="test">exemple</h5> <--! Cette balise est celle qui s'affiche lors du passage de la souris sur la div-->
CSS :
h5
{
color: white;
display: none;
}
.test .first:hover
{
display: inline;
}
Voilà comment j'applique ton conseil Chupachups23, mais ça ne marche pas.. le texte reste caché
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Si j'ai bien compris , tu voudrais quand par exemple tu pointe la ou il est censé avoir le menu , les éléments apparaissent ?J'aurais bien une solution assez simple mais pas facile a intégrer dans un site , je m'explique un menu de la même couleur que ton fond et quand ta souris pointe sur le div , ça modifie la couleur d'arrière plan.
Html
CSS
Html
<div id="test"><ul id="titre"><li> <font>Admin</font> </li></ul> <ul> <li><a href="index.php">Index</a></li> </ul> </div>
CSS
#test:hover
{
background-color: blue;
}
ul a
{
color: white;
}
C'est domage l'idée était bonne mais en fait, si ma souris passe par hasard sur les liens, ça ne le fait pas, tu comprends? Je suis à l'heure actuelle en train de voir si je peux trouver un éditeurs html/css/javascript de visualisation pour créer ce que je souhaite assez simplement et obtenir un script personnalisé...
Ba je sais pas si tu trouvera en java script une fonction pour être sur que la personne a bien fait exprès mais tu pourrais aussi essayer avec opacity mais c'est le même système qu'avec le fond. Si la souris n'est pas dessus l'opacité est a 0 et si tu passe la souris sur le bloc , le texte apparait (opacité est a 1).
Bonsoir,
En javascript c'est très facile de faire ce genre de chose (ce langage sert d'ailleurs à faire des modifications dynamiques de ta page HTML).
Je te conseille de t'orienter vers une telle solution.
En terme d'apprentissage si tu connais le HTML et le CSS tu risques de tout piger rapidement (c'est principalement de la modification d'arbre DOM en récupérant les éléments soit par id, soit par class, en leur ajoutant des fils, en modifiant les propriétés css...).
L'inconvénient, comme toujours, du javascript, c'est que si l'utilisateur a désactivé le javascript dans son navigateur, et bien ça ne fera rien du tout.
Cordialement,
En javascript c'est très facile de faire ce genre de chose (ce langage sert d'ailleurs à faire des modifications dynamiques de ta page HTML).
Je te conseille de t'orienter vers une telle solution.
En terme d'apprentissage si tu connais le HTML et le CSS tu risques de tout piger rapidement (c'est principalement de la modification d'arbre DOM en récupérant les éléments soit par id, soit par class, en leur ajoutant des fils, en modifiant les propriétés css...).
L'inconvénient, comme toujours, du javascript, c'est que si l'utilisateur a désactivé le javascript dans son navigateur, et bien ça ne fera rien du tout.
Cordialement,