Question

我在这里有一个网站：https://seedcreativeacademy.co.uk-如果你向下滚动到学院部分的最新消息，你会看到两篇精选的博文。我有一个漂亮的悬停状态，图像增长。

但是随着图像的增长，在图像悬停时，我想要一个副标题（在一个单独的div中）淡入并变得可见。它目前是opacity: 0;，我想转换到opacity: l;我有以下代码，但它似乎没有工作：

.feat-sub-title {
    text-transform: uppercase;
    color: #fff;
    position: absolute;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: 9999;
    background: rgba(248, 79, 84, 0.8);
    padding: 15px 15px 5px 25px;
    opacity: 0;
}


.feat-image img:hover +.feat-sub-title {
    opacity: 1;
}

.feat-image img {
    position: absolute;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.feat-image img:hover {
    -moz-transform: scale(1.06);
    -webkit-transform: scale(1.06);
    transform: scale(1.06);
}

这是输出两个帖子的PHP循环：

<?php while ( $custom_query->have_posts() ) : $custom_query->the_post(); ?>


        <div class="feat-post">

            <a href="<?php the_permalink(); ?>">
                <div class="feat-title">
                    <h3><?php the_title(); ?></h3>
                </div>
            </a>

            <a href="<?php the_permalink(); ?>">
                <div class="feat-sub-title">
                    <h4><?php the_field('subtitle'); ?></h4>
                </div>
            </a>

            <a href="<?php the_permalink(); ?>">
                <div class="feat-image">
                    <?php the_post_thumbnail(); ?>
                </div>
            </a>

        </div>



      <?php endwhile; ?>

谁能看到我出错的地方？

Answer 1

<div class="feat-post">

        <a href="https://seedcreativeacademy.co.uk/what-is-seo-getting-ranked-on-the-only-page-that-matters/">
            <div class="feat-title">
                <h3>What is SEO?</h3>
            </div>
        </a>

        <a href="https://seedcreativeacademy.co.uk/what-is-seo-getting-ranked-on-the-only-page-that-matters/">
            <div class="feat-sub-title">
                <h4>Getting Ranked on The Only Page That Matters!</h4>
            </div>
        </a>

        <a href="https://seedcreativeacademy.co.uk/what-is-seo-getting-ranked-on-the-only-page-that-matters/">
            <div class="feat-image">
                <img width="1920" height="1271" src="https://seedcreativeacademy.co.uk/wp/wp-content/uploads/2017/10/What-is-SEO-banner.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="What is SEO?" srcset="https://seedcreativeacademy.co.uk/wp/wp-content/uploads/2017/10/What-is-SEO-banner.jpg 1920w, https://seedcreativeacademy.co.uk/wp/wp-content/uploads/2017/10/What-is-SEO-banner-300x199.jpg 300w, https://seedcreativeacademy.co.uk/wp/wp-content/uploads/2017/10/What-is-SEO-banner-768x508.jpg 768w, https://seedcreativeacademy.co.uk/wp/wp-content/uploads/2017/10/What-is-SEO-banner-1024x678.jpg 1024w" sizes="(max-width: 1920px) 100vw, 1920px">               </div>
        </a>

    </div>

使用您拥有的代码，您可以这样做：

.feat-post:hover .feat-sub-title {
      opacity: 1;
}

CSS - 将图像悬停在一个单独的div中

1 个答案: