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

时间:2013-08-09 00:43:14

标签: php css3 hover underline

我正在慢慢了解php,但需要一些帮助。 当你将鼠标悬停在帖子缩略图上时,我希望.rel中的h1标记加下划线。 有人能指出我正确的方向吗?

我发现: 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 =“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>

1 个答案:

答案 0 :(得分: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>