當你懸停 - wordpress主題只顯示圖像上的文字

我正在使用this WP theme，我正在努力調整代碼，以便內容框中的標題和說明僅在懸停時顯示（目前它們始終顯示並懸停只是使圖像變暗）。當你懸停 - wordpress主題只顯示圖像上的文字

下面是有問題的代碼（據我可以告訴）：

.home_featured_post_last {餘量右：0; }

.home_featured_post_hover {position：absolute; top：0;左：0;寬度：100％;身高：100％;顯示：塊;文字修飾：無; border-radius：5px; }

.home_featured_post_hover：hover {background：url（'images/trans-back.png'）repeat;文字修飾：無; 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; 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;顏色：#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代碼的格式有關？有關如何做到這一點的任何想法？

對不起，如果這真的很明顯 - 我不能解決。

來源

2015-10-24 touto

嘗試添加這些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透明，然後在鼠標懸停在鏈接上時顯示它。

來源

2015-10-24 12:53:47 Aziz

是的謝謝！這工作！ – touto

當你懸停 - wordpress主題只顯示圖像上的文字

回答

相關問題