CSS图像悬停更改文本颜色

Question

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

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:

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

<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

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:

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

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.

Answer 2

You should use jquery .hover() method.

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

 });

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