仅在悬停时在图像上显示文本 - wordpress 主题答案

【问题标题】：Only show text on image when you hover - wordpress theme仅在悬停时在图像上显示文本 - wordpress 主题
【发布时间】：2016-01-23 21:22:07
【问题描述】：

我正在使用this WP theme，我正在努力调整代码，以便内容框中的标题和说明仅在悬停时显示（目前它们始终显示，悬停只会使图像变暗)。

这里是有问题的代码（据我所知）：

.home_featured_post_last { margin-right: 0; }

.home_featured_post_hover { 位置：绝对；顶部：0；左：0；宽度：100%；高度：100%；显示：块；文字装饰：无；边框半径：5px； }

.home_featured_post_hover:hover { 背景: url('images/trans-back.png') 重复;文字装饰：无；边框半径：5px； }

.home_featured_post_tbl { 显示：表格；宽度：100%；高度：100%； }

.home_featured_post_tbl_cell { 显示：块；文本对齐：居中；垂直对齐：中间；颜色：#fff;文字阴影：1px 1px #000;字体大小：14px；字体系列：Arial、Helvetica、sans-serif；颜色：#fff;字母间距：1.5px；字体粗细：400； }

.home_featured_post_tbl_cell h3 { text-shadow: 1px 1px #000;字体大小：19px；字体系列：Arial、Helvetica、sans-serif；颜色：#fff;字母间距：1.5px；字体粗细：700； }

<a class="home_featured_post_hover" href="<?php the_permalink(); ?>">
                    <div class="home_featured_post_tbl">
                        <div class="home_featured_post_tbl_cell">
                            <h3><?php the_title(); ?></h3>
                            <p><?php echo ds_get_excerpt('40'); ?></p>
                        </div><!--//home_featured_post_tbl_cell-->
                    </div><!--//home_featured_post_tbl-->
                </a><!--//home_featured_post_hover-->

正如其他一些帖子中所建议的那样，我尝试以各种不同的组合将visibility: hidden; 和visibility: visbile; 添加到 CSS 中，但它要么只是完全隐藏了文本，要么根本不起作用。这是否与 PHP 代码的格式有关？关于如何做到这一点的任何想法？

对不起，如果这真的很明显 - 我无法解决。

【问题讨论】：

标签： php css wordpress

【解决方案1】：

尝试添加这些 CSS 行...如果您想要更平滑的效果，可以添加 css transition 属性！

a.home_featured_post_hover .home_featured_post_tbl_cell { opacity:0; }

a.home_featured_post_hover:hover .home_featured_post_tbl_cell { opacity:1; }

这基本上是让标题/说明 div 透明，然后在鼠标悬停在链接上时显示它。

【讨论】：