CSS图像悬停改变文本颜色

2022-01-22 00:00:00 colors image text hover css

我希望能够将鼠标悬停在图像上并且图像下方的文本会改变颜色.

I'd like to be able to hover over an image and the text below the image change color.

我的意思的一个例子可以在这个网站上看到，通过将鼠标悬停在任何产品上，下面的文本会变为白色:www.ugmonk.com

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>

我尝试过在开头打开'a'标签并在结尾处关闭，如下所示:

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>

然后我尝试设置 a:hover 的样式，但无法正常工作！

And then I have tried to style a:hover but can't get it working!

谢谢

*编辑*

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

推荐答案

当您只显示 PHP 代码而不是生成的 HTML 时，很难看到要突出显示的文本的直接路径.但是，使用您提供的第一个代码示例，您可以尝试以下选择器:

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

编辑

抱歉，我删除了 > 选择器，因为它不会针对 h3 元素内的锚标记.如果这不起作用，您可能需要包含更多信息，例如 CSS，因为它适用于我使用上面的代码.

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.

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

相关文章