Question

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

以下是有问题的代码（据我所知）：

.home_featured_post_last {margin-right：0; }

.home_featured_post_hover {position：absolute;顶部：0;左：0;宽度：100％;身高：100％;显示：块; text-decoration：none; border-radius：5px; }

.home_featured_post_hover：悬停{background：url（＆＃39; images / trans-back.png＆＃39;）重复; text-decoration：none; border-radius：5px; }

.home_featured_post_tbl {display：table;宽度：100％;身高：100％; }

.home_featured_post_tbl_cell {display：block; text-align：center; vertical-align：middle;颜色：#fff; text-shadow：1px 1px＃000; font-size：14px; font-family：Arial，Helvetica，sans-serif;颜色：#fff;字母间距：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;颜色：#fff;字母间距：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; }

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

只悬停时在图片上显示文字 - wordpress主题

1 个答案: