Question

我有一个带几个不同按钮的伸缩框，分别是“购物我的表情”，社交图标和评论图标。我希望他们将鼠标悬停在backgound-color: #ffff; (font) color: #f37761;和border color: #f37761上。应用:hover不会执行任何操作。有什么想法吗？

您可以在以下位置找到我的问题：www.rachelclayton.co。它位于后meta区域中每个帖子下方的首页上。

/ * 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;
}

Answer 1

在CSS中，:和hover之间有一个空格。这将导致悬停无法正常工作。

Answer 2

我通过控制台添加了悬停功能，效果很好

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

如何使弹性框按钮悬停？

2 个答案: