Hover des éléments d'un DIV

Bonjour
Ca fait déjà une soirée entière que je passe là-dessus et je sèche carrément

Au fait, je voudrais faire ceci :


Voilà le code HTML:

    <div class="featured-ticker">
      <div class="featured-ticker-left"></div>
      <div class="featured-ticker-right">
        <a href="" class="featured-ticker-right-link"><div class="featured-ticker-title1">This is the line 1</div>
        <div class="featured-ticker-title2">This is the line 2</div></a>
      </div>
      <div style="clear: both;"></div>
    </div>

Avec le CSS (momentanément bordélique):

.featured-ticker {height: 69px; width: 880px; margin-top: 26px; -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);}
.featured-ticker-left {height: 69px; width: 155px; background: url(library/img/featured-module/temp-left-bg.png); border-right: rgba(209,209,209,1) solid 1px; float: left;}
.featured-ticker-right {height: 69px; width: 724px; background: rgba(255,255,255,1); float: right; text-transform: uppercase; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out;}
.featured-ticker-right:hover {height: 69px; width: 724px; background: rgba(37,153,207,1); float: right; text-transform: uppercase; color: rgba(255,255,255,1)}
.featured-ticker-title1 {font-family: 'Helvetica Neue 55 Roman'; font-size: 10px; color: rgba(145,145,145,1); padding-top: 23px; padding-left: 26px; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out;}
.featured-ticker-title1:hover {color: rgba(255,255,255,1); padding-top: 23px; padding-left: 26px;}
.featured-ticker-title2 {font-family: 'Helvetica Neue 85 Heavy'; font-size: 16px; color: rgba(38,35,36,1); padding-left: 26px; margin-top: 3px; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out;}
.featured-ticker-title2:hover {color: rgba(255,255,255,1); padding-left: 26px; margin-top: 3px;}
.featured-ticker-right-link {text-decoration: none;}
.featured-ticker-right-link:hover {text-decoration: none;}

J'ai essayé tout et n'importe quoi (je pense). Donc le code affiché n'est pas forcément clair, je m'en excuse

Et donc avec ces techniques, le fond du DIV droit change vers le bleu mais le texte ne change que si l'on passe exactement dessus. Il faudrait que peu importe où on passe avec le curseur sur le DIV, le texte vire au blanc

Merci d'avance, en espérant ne pas vous faire avoir une migraine
Bonne soirée


PS: en ligne là → http://graphix.net23.net/index-alsacreations.php
Modifié par Mathieu. (04 Mar 2012 - 01:29)

Je t'expose le principe, tu n'auras qu'à l'appliquer à ton cas.

<div class="bloc">
	<span>Line 1</span>
	<h2>Line 2</h2>
</div>

// ton style par défaut
.bloc {
    background: #fff; // valeur par défaut puisqu'on voudra lui donner une transition
}
.bloc h2 {
    color: #000;
}
.bloc span {
    color: #777;
}

// style de ton bloc quand il est survolé
.bloc:hover {
    background: blue; // mais il faudra un valeur hexadécimal pour une transition
}
.bloc:hover h2 {
    color: #fff;
}
.bloc:hover span {
    color: #fff;
}

Le gros de l'idée est de seulement utiliser le parent dans son format :hover, et de changer le style de ses enfants lorsqu'il est survolé (dixit .bloc:hover h2)
Modifié par Vaxilart (04 Mar 2012 - 07:22)

Bonjour

Merci ça fonctionne parfaitement

Maintenant il ne me reste plus qu'à trouver un moyen de faire une transition CSS3 sur ces éléments.