28172 sujets

CSS et mise en forme, CSS3

[resolu] Affichage d'un nouveau bloc au passage de la souris

Bonjour,

Je cherche le moyen de faire apparaître un bloc lors du survol d'un autre bloc.

J'utilise le CSS

.effet{
display: none;
}

p:hover .effet{
display:block;
}

et le HTML

<p>Bonjour</p>
<p class='effet'>Au revoir</p>

Quand je survole bonjour, au revoir ne s'affiche pas. Savez vous pourquoi et comment faire?

Le but à terme est de créer un menu horizontal déroulant à 3 niveaux. Je suis encore débutant en CSS.

Merci.
Modifié par superfloflo25 (29 Jan 2014 - 11:23)
salut,
d'abord ton sélecteur indique que ".effet" est enfant du "<p>" à survoler

p:hover .effet {display:block}

cela veut dire qu'au survol d'un <p>, rendre en "display:block" tous les enfants de ce <p> ayant comme classe ".effet".
Hors dans ton HTML, ".effet" est frère du <p> à suvoler. Donc c'est un sélecteur d'adjacence qu'il faut avoir, soit "+".
Ton CSS devient donc

p:hover+.effet {display:block}

Par ailleurs, une balise <p> ne pourra pas contenir une autre balise <p> ni aucun autre élément de type bloc. Donc dans sa conception, ton code est faux.
De plus, côté accessibilité, l'utilisation de "display:none/block" n'est pas bonne et pour finir et faire simple, un menu déroulant ne se construit pas de la sorte. Il y a des tas d'exemples ce le net, il te suffit de taper "menu déroulant CSS" pour avoir un tuto t'expliquant en détail tout ça.
Bonjour,

Je vois que j'ai 0/20! Pour un prof c'est plutôt embarassant Smiley confus

J'ai bien évidemment en premier googlé "menu déroulant CSS" et m'appuyais essentiellement sur la page http://www.css-faciles.com/menu-deroulant.php qui avait l'avantage de ne pas utiliser de javascript (donc plus rapide à charger j'imagine).

La technique des blocs cachés était séduisante et je cherchais la comprendre pour l'adapter à mon site.

Je vais revoir ma copie et tester d'autres méthodes. Smiley cligne
Y'a pas de problèmes, il faut bien débuter mais pour le prof qui a 0/20, je prends quand même Smiley biggrin .
Je suppose que ce n'est pas le meilleur exemple qui est cité dans le lien. Ça reste très simple à faire et sans JavaScript bien sûr.
Le principe général est de passer les sous menus à faire apparaître en "position:absolute" et de leur donner un "top" négatif assez élevé pour les rendre invisibles aux yeux de l'utilisateur. Puis de leur redonner une valeur "top" qui correspond à la bonne mise en page pour qu'ils apparaissent.
Voici un exemple fait rapidement (qui peut paraître un peu brouillon) mais qui montre le principe.
Je t'en prie. Juste aussi un mot pour dire de faire attention aux erreurs HTML présentes sur ton site. Faudrait penser à valider le code. Il y a des ' fermés deux fois et des fins de balises </a> présentes alors qu'elles n'ont pas été ouvertes.
Juste par précaution, il vaudrait mieux mettre un ID sur ton <nav> pour cibler spécifiquement cet élément au cas où un autre <nav> viendrait s'ajouter.
OK.

Je vais voir tout cela.

Je posterai de toute façon dans "critique de vos sites" avant la mise en ligne de la nouvelle version.

Votre aide (mise en page par colonnes puis menu déroulant) m'aura vraiment bien aidé. Smiley smile

@+

Flo
Sujet clos
Aller à