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>

然后我试着设计一个样式：悬停但无法使其正常工作！

由于

*的修改 *

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！也许是为了让它在旧版浏览器中运行，但因为它是渐进式增强功能。

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

3 个答案: