Text Underline when Hover over Image

Question

I'm slowly understanding php but need some help please. I would like the h1 tag in the .rel to underline, when you hover over the post thumbnail. Could someone point me in the right direction please?

I found: hover image and text change BUT NO ANSWER. Underlining in Javascript? but not sure how the jquery works in my case? http://www.kirupa.com/forum/showthread.php?295704-Change-text-hover-when-hovering-over-an-image but the a href is wrapped around the image and text.

I've read about mouseOver and mouseOut functions but unfamiliar with these!

My code in php

div id="boxes"

<div class="box">
    <div class="rel">
        <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
        <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('homepage-thumb', array('alt' => '', 'title' => '')) ?></a>
<?php if ($mulderamanda_theme_options['images_only'] == 0): ?>

        </div>


    </div>
</div>

Answer 1

try the following css:

.box > .rel > a.thumbnail:hover ~ h1 { text-decoration; underline; }

and add a class attribute:

<div class="box">
    <div class="rel">
        <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
            <a class="thumbnail" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('homepage-thumb', array('alt' => '', 'title' => '')) ?></a>
<?php if ($mulderamanda_theme_options['images_only'] == 0): ?> 
   </div>
</div>

ps: deleted the unmatched </div>.