CSS图像悬停更改文本颜色

Question

我希望能够将鼠标悬停在图像上，并且图像下方的文本会更改颜色。

通过将鼠标悬停在任何产品上，下面的文本变为白色，可以在此网站上看到我的意思的示例：www.ugmonk.com

这是我的列表项的代码：

<li>
            <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php printf(__('%s', 'wpzoom'), get_the_title()); ?>">   
                <?php unset($img); if ( current_theme_supports( 'post-thumbnails' ) && has_post_thumbnail() ) {
                $thumbURL = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), '' );
                $img = $thumbURL[0];  }
                else  {
                    if (!$img) { $img = catch_that_image($post->ID);  }
                    }  
                if ($img){ $img = wpzoom_wpmu($img); ?>
                <img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo $img ?>&amp;w=280&amp;h=280&amp;zc=1" alt="<?php the_title(); ?>"/><?php } ?>
                </a>

            <div class="meta">
                <h3><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php printf(__('%s', 'wpzoom'), get_the_title()); ?>">  <?php the_title(); ?></a></h3>
            <?php
            $price = get_post_meta(get_the_ID(), 'wpzoom_portfolio_overview', true);
            $price = do_shortcode($price);
            ?>
            <a href="<?php the_permalink(); ?>"><?php echo $price; ?></a>

            </div>
        </li>

我试过像这样在开始处打开'a'标签并在结尾处关闭：

<li>

            <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php printf(__('%s', 'wpzoom'), get_the_title()); ?>">   
                <?php unset($img); if ( current_theme_supports( 'post-thumbnails' ) && has_post_thumbnail() ) {
                $thumbURL = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), '' );
                $img = $thumbURL[0];  }
                else  {
                    if (!$img) { $img = catch_that_image($post->ID);  }
                    }  
                if ($img){ $img = wpzoom_wpmu($img); ?>
                <img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo $img ?>&amp;w=280&amp;h=280&amp;zc=1" alt="<?php the_title(); ?>"/><?php } ?>


            <div class="meta">
                <h3><?php the_title(); ?></h3>
            <?php
            $price = get_post_meta(get_the_ID(), 'wpzoom_portfolio_overview', true);
            $price = do_shortcode($price);
            echo $price; ?></a>

            </div>
        </li>

然后我尝试设置a：hover的样式，但无法使其正常工作！

谢谢

* 编辑 *

输出的HTML：

<li>
    <a href="http://www.domain.com/link" rel="bookmark" title="Description">   
        <img src="http://domain.com/image" alt="Description"/>
    </a>

    <div class="meta">
        <h3>
            <a href="http://www.domain.com/link" rel="bookmark" title="Description">
                Product
            </a>
        </h3>
        <a href="http://www.domain.com/link">
            <span class="Cart66Price">£15.00</span>
        </a>
    </div>
</li>           

Answer 1

仅显示PHP代码而不是生成的HTML时，很难看到要突出显示的文本的直接路径。 但是，使用提供的第一个代码示例，您可以尝试使用以下选择器：

a[rel="bookmark"]:hover + .meta * {
    color: #fff;
}

编辑

抱歉，我删除了>选择器，因为这不会将h3元素内的定位标记作为目标。 您可能必须包含更多信息，例如CSS（如果此方法不起作用），因为使用上面的代码对我有用。

工作示例： http : //jsfiddle.net/eqfQb/

Answer 2

您应该使用jquery .hover（）方法。

$("#myImg").hover(function(){
    $('#myText').css('color','any color code');

 });

Answer 3

对于允许锚元素包含其他元素的CSS3来说，这也是一个很好的例子。 您不需要jQuery！ 也许可以使其在较旧的浏览器中运行，但是由于它是逐步增强的。