如何自动调整以适应 WP 中悬停文本描述图像中的所有文本

Posted 2023-03-06

【中文标题】如何自动调整以适应 WP 中悬停文本描述图像中的所有文本

【英文标题】：How to automatically adjust to fit all the text in hover text description image in WP

【发布时间】：2017-02-23 14:59:32

【问题描述】：

我有一张图片，其内容悬停在 wordpress 帖子中。谁能帮助我如何使文本适合我的图像框的悬停效果。我很困惑为什么它不适合。我正在使用 wordpress CMS。请检查我下面的代码，特别是我的 css。我还提供了一个行为错误的屏幕截图。我将不再发布我的 javascript，因为它没有问题。请关注我的css我认为..？谢谢。

这是我的 CSS：

.top-featured-image 
    position:relative;
    width: 280px;
    overflow:hidden;
    display:inline;

.top-featured-image span 
    background-color: rgba(130,127,122,0.7);
    color:white;
    font-size: small;
    position:absolute;
    bottom: -97px;
    left:0px;
    padding-left: 5px;
    padding-right: 5px;
    max-height: 100px;
    width:300px;
    display: none;
    float:left;
    text-align:left !important;

.top-featured-image span a 
    color:white;

.top-featured-image span a:hover 
    color:white;

.top-featured-image ul 
    list-style:none;
    display: inline;

这是我的带有 wordpress 后循环的 html，我认为这里没有问题？只有CSS： 如果

( $productsBlog->have_posts() ) : 
                ?>
<div class="container">
<ul class="image">
<div class="row row-centered">
    <?php while ( $productsBlog->have_posts() ) : $productsBlog->the_post(); ?>
        <div class="col-xs-4 col-box1" onMouseOver="show_title<?php echo $count ?>()" onMouseOut="hide_title<?php echo $count ?>()">
        <li class="top-featured-image">
        <span class="effect" id="hoverli<?php echo $count ?>"><?php the_content( sprintf('<a href="%s">', esc_url(get_permalink())),'</a>'); ?></span>
        <?php the_post_thumbnail('productsize'); ?>

        </div>
        <?php if($count==2) :
        echo '</div>';
        echo '<div class="row row-centered">';
        endif; ?>
        </li>
        <?php $count++; endwhile; ?>
        </ul>
        </div>


    <?php endif; 
    wp_reset_postdata();

【参考方案1】：

我需要在编辑器中尝试，但云是你使用max-height: 100px;

我觉得你的 css 有点混乱。但我需要尝试确定不工作。 无论如何，我今天正在使用这个 http://jsfiddle.net/51csqs0b/ 我想你可以从中获得一些灵感。

【讨论】：

谢谢您的回答先生，但仍然没有。文本重叠的宽度先生。在你的jsfiddle也是先生。 jsfiddle.net/51csqs0b/641