[Résolu] "Exploit CSS" - Double effet :hover

Bonjour.

J'ai essayé de réaliser un truc un peu compliqué en CSS...
J'ai un titre H2 constitué de deux mots, le premier de couleur noire et le second de couleur rouge.
Je souhaite que les couleurs s'alternent lorsque l'on passe la souris sur le titre.

Voici mon code:

<h2 class="multi colors"><span class="one">Creative</span><span class="two">Designs</span></h2>

h2.multi {
	text-align: center;
	width: 50%;
	margin: 0 auto;
	border: 1px solid #B5B5B5;
	background-color: #E9E9E9;
	padding: 15px;
	font-size: 2.3em;
	color: #333333;
}

h2 span.two {
	color: #E87372;
}

h2 span.two:hover {
	color: #333333;
}

h2.multi:hover {
	color: #E87372;
}

Le résultat est visible ici: http://codepen.io/Joel/pen/DCqwd

Comme vous le remarquez, le processus fonctionne relativement... Quand on passe sur "Designs", "Creative" devient rouge, mais l'inverse ne marche pas.

Une idée pour réaliser ça proprement ?

Merci.
Modifié par Wingate (01 Jan 2013 - 13:17)

Bonjour,

J'ai repris votre code pour obtenir ceci

Bonne Année

Ah voilà !
Je n'étais pas si loin...

Tankiou!