0

JSFIDDLE

jsfiddle リンクから問題を確認できます: 特定の太さの境界線が設定されていますが、一般的には表示されません (フーバーでのみ表示されます)...

同時に、ボーダーが関与していない場合、まったく同じ構造が問題なく動作します。 ( JSFIDDLE サンプル 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>
4

3 に答える 3

3

.DarkText .orangeborder

「.DarkText .orangeborder」のボーダー左は、「.DarkText .TwoBoxesDark li」のボーダーによって上書きされています。

変化

.DarkText .orangeborder

に

.DarkText li.orangeborder

また

.DarkText .TwoBoxesDark li.orangeborder

動作します。

于 2013-06-10T14:15:43.097 に答える