html - 在悬停 CSS 上添加左边框

Question

我试图让一个元素在悬停时显示左边框。目前我将其设置为使用顶部边框作为分隔线，并将右、下和左边框设置为 0。

.post.reply {
        font-family: 'Arial', sans-serif !important;
        font-size: 8pt !important;
        background: #fafafa !important;
        color: #1a1a1a !important;
        width: 100% !important;
        border-bottom: 0 !important;
        border-top: 3 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-color: #cecece !important;
    }

这是悬停

.post.reply:hover {
        box-shadow: #444 0 0 0px !important;
        border-left: 4px !important;
    }  

悬停部分的其他功能正常，但边框不显示。我几乎可以肯定这是因为我在上面设置了 0，但是悬停时不应该有所不同吗？任何帮助表示赞赏。

Answer 1

这就是您的整体 CSS 应该的样子，并且它会完美地工作:

.post.reply {
        font-family: 'Arial', sans-serif !important;
        font-size: 8pt !important;
        background: #fafafa !important;
        color: #1a1a1a !important;
        width: 100% !important;
        border-top: 3px solid #cecece !important;
        border-bottom: none !important;
        border-left: none !important;
        border-right: none !important;
}

.post.reply:hover {
        box-shadow: #444 0 0 0px !important;
        border-left: 4px solid #cecece !important;
}

我还创建了一个快速 jsFiddle 给你看。此外，如果您真的不需要它们，您应该删除所有 !important。