CODEWITHSUNDEEP
cssimagetextcolorshover
Jambo
Jambo

Reputation: 3097

CSS image hover change color of text

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>

Upvotes: 0

Views: 5116

Answers (3)

sidneydobber
sidneydobber

Reputation: 2910

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.

Upvotes: 0

My Head Hurts
My Head Hurts

Reputation: 37665

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

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.

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

Upvotes: 1

Awais Qarni
Awais Qarni

Reputation: 18006

You should use jquery .hover() method.

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

 });

Upvotes: 0

Related Questions