Question

When I hover the h2 link, it turns green:

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; 
}

I would like the h2 to turn green when I hover the image link too.

I think jQuery is the way to go. Any suggestions?

Answer 1

a:hover+h2

will work in CSS[1]. Using it directly as a jQuery selector will work, but might be cumbersome just to apply styles. Here’s how I might do it if I needed to support the CSS + selector:

...
<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] See http://www.quirksmode.org/css/contents.html for + selector compatibility