Un h3:hover ca n'existe pas :O

Salutation !
Voilà mon HTML

    <section  id="logo">
		 <div id="1">
			<h3>Pour saliver ...</h3>
		 </div>
		 <div id="2">
			<p>Quelques logos de chocolateries célèbres et leurs sites</p>
			<nav>
				<ul>
					<li id="toblerone"><a href="http://www.toblerone.com"><div></div></a></li>
					<li id="galler"><a href="http://www.galler.com"><div></div></a></li>
					<li id="coteor"><a href="http://www.cotedor-chocolat.com"><div></div></a></li>
					<li id="milka"><a href="http://www.milka.com"><div></div></a></li>
				</ul>
			</nav>
		 </div>
		  
       </section>

Et mon css lié

#1:hover #2{
	visibility: visible;
}

#2{ 
     list-style-type: none;
     display:inline-block;
     visibility: hidden;
}

On est bien d'accord, normalement quand je passe ma souris sur le #1 ca devrait m'afficher mon #2 ?
Pourquoi cela ne fonctionne pas ?
Sauf que ca ne marche pas bien sûr, comment rendre mon titre h3 hover-able ?

Bonjour,

Attention à ton sélecteur...
Lorsque tu indiques #1:hover #2 (avec un espace entre les 2), cela veut dire que #2 est un enfant de #1.
Dans ton html, #2 est le frère direct #1. Tu devras plutôt utiliser le sélecteur adjacent (+)

#1:hover + #h2

Voici un article qui réexplique tout ceci...

Bon amusement,
Yordi