如何让我的弹性框按钮悬停？

Posted 2023-05-08

【中文标题】如何让我的弹性框按钮悬停？

【英文标题】：How can I make my flex-box buttons hover?

【发布时间】：2019-10-23 05:19:11

【问题描述】：

我有一个带有几个不同按钮的弹性框，即“购买我的造型”、社交图标和评论图标。我希望他们悬停在backgound-color: #ffff;(font) color: #f37761; 和border color: #f37761。应用 :hover 不会做任何事情。有什么想法吗？

你可以在这里找到我的问题：www.rachelclayton.co。它位于帖子元区域中每个帖子下的主页上。

/* html */

<?php if(!is_single()) : ?>
        <div class="read-more">
            <a href="<?php echo get_permalink() ?>"><?php  esc_html_e( 'Continue Reading', 'alder' ); ?> <i class="fa fa-angle-right" aria-hidden="true"></i></a>
        </div>
        <div class="shop-social">
            <div class="shop-my-look">
                <a href="<?php echo get_permalink() ?>"><?php esc_html_e( 'Shop My Look', 'alder' ); ?>                  </a>
            </div>
            <?php if(!get_theme_mod('alder_post_share')) : ?>
                <div class="post-share">
                    <a target="_blank"    href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>"><i class="fa fa-facebook"></i></a>
                    <a target="_blank" href="https://twitter.com/intent/tweet?text=Check%20out%20this%20article:%20<?php print alder_social_title( get_the_title() ); ?>&url=<?php echo urlencode(the_permalink()); ?><?php if(get_theme_mod('alder_twitter')) : ?>&via=<?php echo esc_html(get_theme_mod('alder_twitter')); ?><?php endif; ?>"><i class="fa fa-twitter"></i></a>
                    <?php $pin_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID)); ?>
                    <a data-pin-do="none" target="_blank" href="https://pinterest.com/pin/create/button/?url=<?php echo urlencode(the_permalink()); ?>&media=<?php echo esc_url($pin_image); ?>&description=<?php print alder_social_title( get_the_title() ); ?>"><i class="fa fa-pinterest"></i></a>
                </div>
            <?php endif; ?>
            <?php if(!get_theme_mod('alder_post_comment_link')) : ?>
                <div class="meta-comment">
                    <a href="<?php comments_link(); ?>"><i class="fa  fa-comment"></i></a>
                </div>
            <?php endif; ?>
        </div>
    <?php else : ?>
        <?php if(!get_theme_mod('alder_post_share_author')) : ?>
            <div class="meta-author">
                <?php echo get_avatar( get_the_author_meta('email'), '60' ); ?><span class="by"><?php esc_html_e( 'by', 'alder' ); ?></span> <span class="vcard author"><span class="fn"><?php the_author_posts_link(); ?></span></span>
            </div>
        <?php endif; ?>
    <?php endif; ?>
</div>
<?php if(!get_theme_mod('alder_post_related')) : ?> 
<?php if(is_single()) : ?>
    <?php get_template_part('inc/templates/post-related'); ?>
<?php endif; ?>
<?php endif; ?>
<?php comments_template( '', true );  ?>

<?php if(!get_theme_mod('alder_post_pagination_hide')) : ?> 
<?php if(is_single()) : ?>
<?php get_template_part('inc/templates/post-pagination'); ?>
<?php endif; ?>
<?php endif; ?>

</article>
</div>

/* CSS */

.post-meta .shop-social 
   display: flex;
   clear: both;

.post-meta .shop-social .post-share a, 
.post-meta .shop-social .meta-comment a 
   margin-left: 10px;

.post-meta .shop-social .shop-my-look,
.post-meta .shop-social .post-share, 
.post-meta .shop-social .meta-comment 
  display: contents;

.post-meta .shop-social .shop-my-look a 
  flex-grow: 3;

.post-meta .shop-social a 
    background: #ffff;
    border: 1px solid #dfdfdf;
    color: #2e2e2e;
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    height: 40px;
    letter-spacing: 2px;
    line-height: 40px;
    width: 4em;
    padding: 0 18px;
    text-align: center;
    text-transform: uppercase;

.post-meta .shop-my-look a 
    font-size: 11px;

.post-meta .shop-social: hover 
    background: #ffff;
    border: 1px solid #eee;
    color: #f37761;

【问题讨论】：

关于你的评论图标，你有.meta comment …。你需要.meta-comment …

另外，为了以后参考，请确保问题本身可以重现问题。

***.com/help/how-to-ask

***.com/help/mcve

谢谢！这有效！

【参考方案1】：

在您的 CSS 中，: 和 hover 之间有一个空格。这会导致悬停不起作用。

【讨论】：

已更新。谢谢。

【参考方案2】：

我通过控制台添加了悬停，它工作正常

.shop-my-look a:hover 
    backgound-color: #ffff;
    color: #f37761;
    border color: #f37761.