html - 将鼠标悬停在整个 div 上

Question

我正在开发一个网站，您可以在其中发布和获得喜欢、回复等...每当用户发布时，它都会将其存储在我创建的 div 中，并且在其中，我有一个部分可以进行喜欢、评论和分享按钮是，我将用图像显示。当我将鼠标悬停在喜欢、评论或分享上时，它并没有像我想要的那样悬停整个部分，而是覆盖了一半。

这是我的 index.html 代码:

<input type="hidden" id="confessId" name="confessId_<?php echo $count; ?>" value="<?php echo $row['confessId']; ?>" />
<div class="actions">
    <div class="likes">
        <span class="label label-confess first liked">
            <a href="" id="likeIt<?php echo $row['confessId']; ?>" class="likeIt_<?php echo $count; ?> text-success">
                <i class="fas fa-thumbs-up"></i>
                <span id="likesVal_<?php echo $count; ?>">
                    <?php echo $row['totalLikes']; ?>
                </span>
            </a>
        </span>
    </div>
    <div class="dislikes">
        <span class="label label-confess disliked">
            <a href="" id="dislikeIt<?php echo $row['confessId']; ?>" class="dislike_<?php echo $count; ?> text-danger">
                <span id="dislikesVal_<?php echo $count; ?>">
                <?php echo $row['totalDislikes']; ?></span>
                <i class="fas fa-thumbs-down"></i>
            </a>
        </span>
    </div>

    <?php if ($row['hasImage'] != '0') { ?>
        <span class="label label-confess"><i class="fa fa-picture-o img"></i></span>
    <?php } ?>

    <div class="comments">
        <div class="divide">
            <a href="page.php?page=view&confession=<?php echo $row['confessId']; ?>">
                <i class="fa fa-comments"></i>
                <?php echo $totComments.' '.$comText; ?>
            </a>
        </div>
    </div>

    <div class="divide2">
        <a href="https://twitter.com/intent/tweet?text=<?php echo $set['siteName']; ?>%20Confession:%20<?php echo ellipsis($row['confessText'],65); ?>%20&url=<?php echo $shareURL; ?>" class="btn btn-tw btn-sm" target="_blank" data-toggle="tooltip" data-placement="top" title="<?php echo $twitterShareTooltip; ?>">
        <i class="fab fa-twitter" style="color:white"></i>
        </a>
    </div>
</div>

还有我的 CSS:

.actions {
    border-top: 1px solid rgba(200, 200, 200, .1);
    height: 40px;
    line-height: 32px;
    box-sizing: border-box;
    position: relative;
}

.action {
    color: #DEDEDE;
    font-size: 12px;
    width: 144px;
    text-align: center;
    box-sizing: border-box;
    height: 40px;
}

.confession .likes, .confession .dislikes {
    float: left;
    text-align: center;
    border-right: 1px solid rgba(200, 200, 200, .1);

    width: 144px;
}

.likes, .dislikes {
    margin-top: 7px;
    margin-bottom: 7px;
}


.divide{
    border-right: 1px solid rgba(200, 200, 200, .1);
    margin-top: 7px;
    margin-bottom: 7px;
    float: left;
    text-align: center;
    width: 144px;
    color: #FEFEFE;
    font-size: 13px;
    text-decoration: none;
}

.divide2 {
    border-right: 0;
    margin-top: 7px;
    margin-bottom: 7px;
    float: left;
    text-align: center;
    width: 144px;
    color: #FEFEFE;
    font-size: 13px;
    text-decoration: none;
}

.likes:hover, .dislikes:hover, .divide:hover,.divide2:hover {
    background-color: rgba(50, 50, 50, .2);
}


.divide a {
    color: white;
}
.confession .likes .label a, .confession .dislikes .label a { font-weight: 700 !important; }

希望大家能理解我，多谢指教。

Answer 1

也许可以尝试在您的 CSS 的 .likes、.dislikes {} 部分中通过填充来替换边距。该问题仅发生在您的 div 的顶部和底部，因此我猜这些边距是导致此问题的原因。

Padding 将添加一个“内边距”，而 margin 将添加一个“外边距”，当您悬停时该边距不会改变。

希望这对您有所帮助!