php - 将鼠标悬停在图像上时的文本下划线

Question

我正在慢慢理解 php，但需要一些帮助。当您将鼠标悬停在帖子缩略图上时，我希望 .rel 中的 h1 标签下划线。有人可以指出我正确的方向吗？

我发现： 悬停图像和文本更改但没有答案。 Javascript中的下划线？但不确定 jquery 在我的情况下如何工作？ http://www.kirupa.com/forum/showthread.php?295704-Change-text-hover-when-hovering-over-an-image但 a 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>

ps：删除不匹配的</div>。