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

僅顯示PHP代碼而不是生成的HTML時，很難看到要突出顯示的文本的直接路徑。 但是，使用提供的第一個代碼示例，您可以嘗試使用以下選擇器：

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

編輯

抱歉，我刪除了>選擇器，因為這不會將h3元素內的定位標記作為目標。 您可能必須包含更多信息，例如CSS（如果此方法不起作用），因為使用上面的代碼對我有用。

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

Answer 2

您應該使用jquery .hover（）方法。

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

 });

Answer 3

對於允許錨元素包含其他元素的CSS3來說，這也是一個很好的例子。 您不需要jQuery！ 也許可以使其在較舊的瀏覽器中運行，但是由於它是逐步增強的。