Effet Hover sur 2 liens distincts ?

Version imprimable

Bonjour,

je voudrais "solidariser" les hover sur 2 liens distincts.

J'ai une boucle qui me génère l'affichage de posts (Titre + Contenu).
Je voudrais qu'un rollover sur Titre donne un effet Hover sur Titre et sur Contenu
(et réciproquement pour un rollover sur Contenu)

Voilà le code:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <div class="pane" style="display: block;"> <ul class="recent-posts"> <?php query_posts('showposts=2&cat='.of_get_option('of_blog_cat')); ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <li class="recent-post"> <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3> <div class="excerpt"><?php $excerpt = get_the_excerpt(); echo string_limit_words($excerpt,20);?> <a href="<?php the_permalink(); ?>"><span class="recent-read-more">...</span></a></div> </li> <?php endwhile; ?> <?php endif; ?> </ul> </div>
Comment faire ?

03/12/2012, 18h50
SylvainPV
Bonjour,

Merci de poster le code HTML généré et pas le PHP.

Sinon ça peut se faire en CSS :
Code:

1 2 3 4 5 6 7 8 9 .titre:hover + .contenu { /*style de contenu quand hover sur titre*/ } /* ou si contenu est fils de .titre */ .titre:hover > .contenu { }
par contre si contenu n'est pas fils de titre, la réciproque sera plus compliquée par contre

Euh... j'ai essayé les 2 cas de figure que tu proposes mais ça ne fonctionne pas
(je m'y suis sans doute pris avec des gants de boxe car je n'y connais pas grand chose...)

Code:

1
2
3
4
5
6
7
8
9
.recent-post:hover + .excerpt {
	/*style de contenu quand hover sur titre */
	color: #999;
}
 
/* ou si contenu est fils de .titre	*/  
.recent-post:hover > .excerpt {
	color: #999;
}

Voici le code en html sinon

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="pane" style="display: block;">
	<ul class="recent-posts">			
			<li class="recent-post">
				<h3><a href="http://xxxx">Titre 1</a></h3>
				<p class="recent-meta"></p>
				<div class="excerpt"><a href="http://xxxx">Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et <span class="recent-read-more">...</span></a></div>
			</li>
			<li class="recent-post">
				<h3><a href="http://xxxx">Titre 2</a></h3>
				<p class="recent-meta"></p>
				<div class="excerpt"><a href="http://xxxx">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat <span class="recent-read-more">...</span></a></div>
			</li>			
	</ul>
</div>

03/12/2012, 21h35
SylvainPV

color n'est peut-être pas la propriété css la plus évidente pour voir que ça fonctionne. Avec un background-color on y voit tout de suite plus clair :
http://jsfiddle.net/hJ2C8/

Et dans le cas où tu souhaites cibler le hover sur ton titre (<h3>) et pas ton <li>, le plus approprié est d'utiliser le sélecteur CSS ~ . Le sélecteur + ne peut pas fonctionner car il y a un <p> entre les deux.

Un exemple vaut mieux que de longs discours :
http://jsfiddle.net/hJ2C8/1/

Comme tu le vois, le seul souci survient lorsqu'il faut appliquer le style sur titre au hover du contenu. En effet, la norme actuelle du CSS ne permet pas de sélectionner des élements précédents, seulement les suivants. Dans ce cas-là, pas le choix, il faut utiliser Javascript :

http://jsfiddle.net/hJ2C8/2/
04/12/2012, 00h18
Mister Paul
Dis-donc Bravo et Merci
:ccool:

Citation:

color n'est peut-être pas la propriété css la plus évidente pour voir que ça fonctionne.

Effectivement.
En fait ton code initial marchait bien sauf qu'on cherchait à changer la couleur du 'a' distant lors du rollover...

J'ai repris ton code js et modifié les css ainsi :
Code:

1 2 3 4 5 6 7 8 9 10 .recent-post h3:hover, .recent-post h3.hover a { color: #999; } .recent-post .excerpt:hover, .recent-post h3:hover ~ .excerpt a { color: #999; }
C'est tout bon.
:ave: