CSS图像悬停改变文本的颜色

I'd like to be able to hover over an image and the text below the image change color.

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

An example of what I mean can be seen on this site, by hovering over any of the products the text below changes to white: www.ugmonk.com

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

This is the code for my list item:

这是我的列表项的代码：

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

I have tried opening the 'a' tag at the beginning and closing at the end like this:

我试过在开头打开'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>

And then I have tried to style a:hover but can't get it working!

然后我尝试了样式：悬停但无法使其正常工作！

Thanks

谢谢

*EDIT*

*编辑*

HTML outputted:

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>

3 个解决方案

#1

It is hard to see the direct path to the text you want to highlight when you are just showing your PHP code rather than the generated HTML. However using the first code example you provided, you could try the following selector:

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

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

Edit

编辑

Sorry, I have removed the > selector as this would not have targeted the anchor tag inside of the h3 element. You may have to include more information, such as CSS if this is not working as it works for me using your code above.

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

Working example: http://jsfiddle.net/eqfQb/

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

#2

You should use jquery .hover() method.

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

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

 });

#3

This can also be a nice case for CSS3 which allows an anchor element to contain other elements. You don't need jQuery for this! Maybe to make it work in older browsers but since it is a progressive enhancement.

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

#1