28172 sujets

CSS et mise en forme, CSS3

[Résolu] CSS :hover changer la couleur du texte au survol de la div

Bonjour,
Ce que je cherche à faire est assez simple :
Au survol d'un div, je cherche à changer la couleur de tout le texte a l'intérieur de la div.
Mon problème c'est que j'y arrive avec le texte basique mais quand le texte est lui même un lien, je ne trouve pas le bon codage en css pour le modifier, alors qu'il n'est pas à proprement parler survolé ( c'est la div qui le contient qui l'est).


<div class="post" id="post-<?php the_ID(); ?>">

	<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></h2>
			
	<div class= "post_content">
			
		<?php the_content(); ?></a>
			
	</div><!--fin post_content-->
			
</div><!--fin post-->




.post{
	background-color: #ffffff;
	color: #000000;
}

.post:hover{
	color: #cc04c2;
	background-color: #000000;
}



il doit y avoir une astuce avec quelques chose du genre
a.post:hover{}, après moultes tentatives je n'y arrive pas (à noter : une partie du texte est aussi <h2>).

Merci d'avance.
essaie 
 
			.post a {
	background-color: #ffffff;
	color: #000000;
}

.post a:hover{
	color: #cc04c2;
	background-color: #000000;
}

Modifié par Philigane (17 Apr 2013 - 14:25)
Administrateur
Philigane a écrit :
essaie 
 
.post a:hover{
	color: #cc04c2;
	background-color: #000000;
}


Hello,

Si c'est au survol de tout le bloc, j'aurais plutôt fait :

 
.post:hover a {
	color: #cc04c2;
	background-color: #000000;
}
Bonjour,

il y a aussi l'heritage qui fonctionne bien.

pas de background, si c'est le même autant ne pas en mettre , et pour la couleur de texte, la valeur [i]inherit[/b], ou peut-être mieux [i]currentcolor[/b] est bien suffisante.
ça reduit la regle pour <a> à:
a {color:inherit;}

ou 
a {color:currentcolor;}


ex: http://dabblet.com/gist/5404584

Cdt,
GC
Administrateur
gc-nomade : oui, avec quelques précautions du côté de la compatibilité.

inherit = IE8+
currentcolor = pas de support avant IE10 je crois
Un grand merci à vous tous et une mention spéciale pour Raphaël et son bout de code :


.post:hover a {
	color: #cc04c2;
	background-color: #000000;
}


c'est exactement ceci que je recherchai
j'avais simplement du mal à ordonner mes éléments (".classe" et ":hover" et "a").
je commence à comprendre la logique :
.post:hover a = lorsque la classe "post" est en hover alors "a" est ....

bonne soirée à tous
Sujet clos
Aller à