Comment faire en sorte qu'un élément ait un effet 'hover' (CSS) en survolant un autre élément en utilisant jQuery?

Question

Quand je passe la souris sur le lien h2, il devient vert:

HTML:

<div class="project"> 
<a rel="bookmark" title="Permalink to Taiwantalk" href="http://localhost/asylum/?p=6"> 
<img class="attachment-post-thumbnail wp-post-image" width="278" height="128" title="taiwantalk_thumb" alt="taiwantalk_thumb" src="http://localhost/asylum/wp-content/uploads/2011/07/taiwantalk_thumb.png"> 
</a> 
<h2> 
<a rel="bookmark" title="Permalink to Taiwantalk" href="http://localhost/asylum/?p=6">Taiwantalk</a> 
</h2> 
<p>Design, HTML, CSS, Wordpress</p> 
</div> 

CSS:

#showcase h2 a:hover { 
    color: #682 !important; 
} 

Je voudrais que le h2 passe au vert quand je passe la souris le lien d'image trop .

Je pense que jQuery est la voie à suivre. Aucune suggestion?

Answer 1

a:hover+h2 

fonctionnera en CSS [1]. L'utiliser directement en tant que sélecteur jQuery fonctionnera, mais pourrait être fastidieux pour appliquer des styles. Voici comment je pourrais le faire si je devais soutenir le sélecteur CSS +:

... 
<style type="text/css"> 
#showcase h2 a:hover, 
#showcase a:hover+h2, 
#showcase.colorme h2 { color: #682; } 
</style> 

<script type="text/javascript> 
// onload or whatever makes sense: 
$("#showcase>a").hover(
    function(){ $(this).parent().toggleClass("colorme"); }, 
) 
</script> 
... 

---

[1] Voir http://www.quirksmode.org/css/contents.html pour + compatibilité sélecteur

Answer 2

Vous pouvez faire:

var colorSaved; 
$('img').hover(function(){ 
    var link = $(this).closest('div.project').find('h2 a'); 
    colorSaved = link.css('color'); 
    link.css('color', 'green'); 
}, 
function(){ 
    var link = $(this).closest('div.project').find('h2 a'); 
    link.css('color', colorSaved); 
}); 

Cela économise la couleur du lien à l'intérieur de la h2, passe la couleur au vert en survol puis la couleur à celle enregistrée

J'ai fait ce violon comme exemple http://jsfiddle.net/nicolapeluchetti/gHjdy/) il a un div avec le texte « test de vol stationnaire » au lieu d'une image)

Bien sûr, si vous avez beaucoup de divs avec le projet de classe ce code fonctionne pour le parent h2. Regardez ici http://jsfiddle.net/nicolapeluchetti/gHjdy/1/