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

Question

我正在使用这个WP主题，我正在努力调整代码，以便内容框中的标题和描述只在悬停时显示（此时它们总是显示，悬停只会使图像变暗）。

以下是相关代码（据我所知）：

.home\u特色化\u post\u last{右边距：0；}

.home\u特色\u post\u悬停{位置：绝对；顶部：0；左侧：0；宽度：100%；高度：100%；显示：块；文本装饰：无；边框半径：5px；}

.home_特色_post_hover:hover{background:url（'images/trans-back.png'）重复；文本装饰：无；边框半径：5px；}

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

.home_特色_post_tbl_单元格{显示：块；文本对齐：中心；垂直对齐：中间；颜色：#fff；文本阴影：1px 1px#000；字体大小：14px；字体系列：Arial，Helvetica，无衬线；颜色：#fff；字母间距：1.5px；字体重量：400；}

.home_featured_post_tbl_cellh3{文本阴影： 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 和可见性：可视性以各种不同的组合添加到CSS中，但要么完全隐藏文本，要么根本不起作用。这是否与PHP代码的格式有关？你有什么想法吗？

对不起，如果这是很明显的-我无法计算出来。




Answer 1

试着添加这些CSS行...如果你想要更流畅的效果，你可以添加css转换属性！

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

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