CSS图片悬停更改文本的颜色 [英] CSS image hover change color of text
问题描述
我想将鼠标悬停在图片上方，图片下方的文字颜色会变化。
我想说的一个例子就是这个通过将鼠标悬停在任何产品上，以下文本将变为白色：www.ugmonk.com
这是我的列表项的代码：
< li>
< a href =<？php the_permalink（）;？> rel =bookmarktitle =<？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; amp; zc = 1alt =<？php the_title（）;？>/><？php}？
< / a>
< div class =meta>
< h3>< a href =<？php the_permalink（）;？" rel =bookmarktitle =<？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'标签， / p>
< li>
< a href =<？php the_permalink（）;？> rel =bookmarktitle =<？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; amp; zc = 1alt =<？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，但不能让它工作！ >
感谢
* 编辑 * b
$ b
HTML输出：
< li>
< a href =http://www.domain.com/link =bookmarktitle =说明>
< img src =http://domain.com/imagealt =说明/>
< / a>
< div class =meta>
< h3>
< a href =http://www.domain.com/link =bookmarktitle =说明>
产品
< / a>
< / h3>
< a href =http://www.domain.com/link>
< span class =Cart66Price>£15.00< / span>
< / a>
< / div>
< / li>
很难看到文本的直接路径你想突出显示当你只是显示你的PHP代码，而不是生成的HTML。但是，使用您提供的第一个代码示例，您可以尝试使用以下选择器：
a [rel =bookmark]：hover + .meta * {
color：#fff;
}
编辑
很抱歉，我已删除> 选择器，因为它不会将锚标记定位在 h3 元素。
工作范例： http://jsfiddle.net/eqfQb/
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 ?>&w=280&h=280&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 ?>&w=280&h=280&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>
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/
这篇关于CSS图片悬停更改文本的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
