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的顶部和底部，因此我想这些空白会导致此问题。

填充将添加一个“内部边距”，而边距将添加一个“外部边距”，当您将鼠标悬停时，该边距不会改变。

希望这会有所帮助！

将鼠标悬停在整个div上

1 个答案: