Текст Подчеркивание при наведении на изображение

Question

Я медленно понимаю php, но мне нужна помощь. Я бы хотел, чтобы h1-тег в .rel подчеркивал, когда вы наводите курсор на миниатюру сообщения. Может ли кто-нибудь указать мне в правильном направлении, пожалуйста?

Я нашел: hover image and text change НО НИКАКОГО ОТВЕТА. Underlining in Javascript?, но не знаете, как работает jquery в моем случае? http://www.kirupa.com/forum/showthread.php?295704-Change-text-hover-when-hovering-over-an-image, но href обернут вокруг изображения и текста.

Я читал о функциях mouseOver и mouseOut, но не знаком с ними!

Мой код в PHP

DIV ID = "коробки"

<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

попробовать следующий CSS:

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

и добавить атрибут класса:

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

пс: удален непревзойденную </div>.