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

这对于 CSS3 来说也是一个很好的例子，它允许锚元素包含其他元素。你不需要 jQuery ！也许是为了让它在旧版浏览器中工作，但因为它是一种渐进式增强。

Answer 2

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

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

编辑

抱歉，我删除了 > 选择器，因为这不会针对 h3 元素内的锚标记。如果这不起作用，您可能需要包含更多信息，例如 CSS，因为它适用于我使用上面的代码。

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

Answer 3

你应该使用 jquery .hover() 方法。

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

 });