php - 悬停时仅在图像上显示文字 - wordpress 主题

Question

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

以下是有问题的代码(据我所知):

.home_featured_post_last { margin-right: 0; }

.home_featured_post_hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-decoration: none; border-radius: 5px; }

.home_featured_post_hover:hover { background: url('images/trans-back.png') repeat; text-decoration: none; border-radius: 5px; }

.home_featured_post_tbl { display: table; width: 100%; height: 100%; }

.home_featured_post_tbl_cell { display: block; text-align: center; vertical-align: middle; color: #fff; text-shadow: 1px 1px #000; font-size: 14px; font-family: Arial, Helvetica, sans-serif; color: #fff; letter-spacing: 1.5px; font-weight: 400; }

.home_featured_post_tbl_cell h3 { text-shadow: 1px 1px #000; font-size: 19px; font-family: Arial, Helvetica, sans-serif; color: #fff; letter-spacing: 1.5px; font-weight: 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 代码的格式有关吗？关于如何做到这一点有什么想法吗？

抱歉，如果这真的很明显 - 我无法解决。

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

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