HTML - CSS display et :hover Fermé

Question

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:

le titre de la partie

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.

saly_inf · Answer

salut pour afficher le titre de chaque partie il suffit d'ajouter l'attribut ''title" exemple:

la partie I

@+.. cdlt

titouflout · Answer

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é

Chupachups23 · Answer

Tu peu aussi faire cela : 

nomdetapartie h1 :hover
{
display:
}

 En gros , ca veut dire :  Les h1 de nomdetapartie .

titouflout · Answer

Bon, on va carrément lacher quelques lignes de code... HTML :

<--! Voici la balise dans la quelle passe la souris -->

exemple

<--! 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é

Chupachups23 · Answer

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

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

Admin

Index

CSS #test:hover { background-color: blue; } ul a { color: white; }

titouflout · Answer

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é...

Chupachups23 · Answer

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).

Marco la baraque · Answer

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,

titouflout · Answer

D'accord je vois... merci quand même

Olivier · Answer

Ceci devrait fonctionner

h5 
{ 
color: white; 
visibility: hidden; 
} 

.test .first:hover 
{ 
visibility: visible; 
}

HTML - CSS display et :hover

10 réponses

Discussions similaires