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>

А потом я попытался стилизовать: hover, но не могу заставить его работать!

Спасибо

* EDIT *

Вывод 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

Это также может быть хорошим примером для CSS3, который позволяет элементу привязки содержать другие элементы. Вам не нужен JQuery для этого! Может быть, чтобы он работал в старых браузерах, но так как это прогрессивное улучшение.

Answer 3

Вы должны использовать метод jquery .hover () .

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

 });