Discussion :

[Mister Paul]

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[SylvainPV]

Bonjour,

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

Sinon ça peut se faire en CSS :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Mister Paul]

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[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/

[Mister Paul]

Dis-donc Bravo et Merci

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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.