Question

你可以从jsfiddle链接看到问题：设置了一定厚度的边框，但它一般不会出现（它只出现在胡佛上）......

同时，当没有涉及边界时，同样的结构没有问题。（JSFIDDLE sample 2）

这是代码：的 CSS

.DarkText {
    margin: 0;
}
.DarkText ul {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 5px 5px 5px 5px;
    display: inline-block;
}
.DarkText a {
    text-decoration: none;
    font-family:'Segoe UI', 'Century Gothic', sans-serif;
    font-size: 14px;
    color: #545353;
    vertical-align: text-top;
}
.DarkText h2 {
    text-shadow: -1px 1px 1px #3D3D3D;
    font-weight: bolder;
    color: #545353;
    padding: 5px 5px 5px 5px;
    margin: 0;
    font-size: 20px;
    line-height: 21px;
    text-align: left;
    font-family:'Segoe UI light', 'Century Gothic', sans-serif;
    vertical-align: text-top;
}
.DarkText p {
    padding: 5px 5px 5px 5px;
    font-family:'Segoe UI', 'Century Gothic', sans-serif;
    font-size: 14px;
    color: #545353;
    vertical-align: text-top;
    text-align: justify;
}
.DarkText .TwoBoxesDark li {
    width: 30.5%;
    height: 145px;
    float: left;
    margin: 0 0 2% 2%;
    border: 1px solid transparent;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
}
.DarkText .orangeborder
{
    border-color: #D6D6D6;
    border-left: 10px solid #ff6a00;
    background-color: #D6D6D6;
    background: #D6D6D6;
    background: -moz-linear-gradient(top, #F2F2F2 0%, #D6D6D6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F2F2F2), color-stop(100%, #D6D6D6));
    background: -webkit-linear-gradient(top, #F2F2F2 0%, #D6D6D6 100%);
    background: -o-linear-gradient(top, #F2F2F2 0%, #D6D6D6 100%);
    background: linear-gradient(to bottom, #F2F2F2 0%, #D6D6D6 100%);
}
.DarkText .orangeborder:hover
{
    border-color: #D6D6D6;
    border-left: 10px solid #ff6a00;
    background-color: #D6D6D6;
    background: #D6D6D6;
    background: -moz-linear-gradient(top, #D6D6D6 0%, #F2F2F2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #D6D6D6), color-stop(100%, #F2F2F2));
    background: -webkit-linear-gradient(top, #D6D6D6 0%, #F2F2F2 100%);
    background: -o-linear-gradient(top, #D6D6D6 0%, #F2F2F2 100%);
    background: linear-gradient(to bottom, #D6D6D6 0%, #F2F2F2 100%);
}

HTML

<div class="DarkText">
    <ul class="TwoBoxesDark">
        <li class="orangeborder">
            <h2>Sample Title</h2>
            <p>This is just a sample paragraph</p>
        </li>
    </ul>
</div>

Answer 1

.DarkText .orangeborder

“.DarkText .orangeborder”的边框左侧被“.DarkText .TwoBoxesDark li”的边框覆盖。

更改

.DarkText .orangeborder

到

.DarkText li.orangeborder

或

.DarkText .TwoBoxesDark li.orangeborder

会工作。

Answer 2

它只出现在悬停上，因为它在此处被覆盖：

.DarkText .TwoBoxesDark li {
            width: 30.5%;
            height: 145px;
            float: left;
            margin: 0 0 2% 2%;
            border: 1px solid transparent;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            cursor: pointer;
        }

评论border: 1px solid transparent;

Answer 3

在你的第一个小提琴中你有：

    .DarkText .orangeborder:hover
    {
        border-color: #D6D6D6;
        border-left: 10px solid #ff6a00;

所以它在悬停时添加了左边框。

CSS边框只出现在悬停状态？

3 个答案: