Граница CSS отображается только при наведении указателя мыши?

JSFIDDLE Граница CSS отображается только при наведении указателя мыши?

Вы можете увидеть проблему с 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>

источник

2013-06-10 Betty Carlton

Не могли бы вы более конкретно указать, что именно вы ищете? Ваш пост в настоящее время является заявлением, а не вопросом. –

Если ваша проблема в том, что текст перемещается при наведении, [как это] (http://jsfiddle.net/peteng/D4D7J/9/)? иначе, если нет оранжевой границы, [попробуйте это] (http://jsfiddle.net/peteng/D4D7J/10/) – Pete

На самом деле, я думал, что это ясный вопрос - я хочу, чтобы граница была видимой все время и единственное, что меняется на фоне серых цветов ... –

Это только появляется при наведении курсора мыши, поскольку он замещается здесь:

.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;

источник

2013-06-10 14:14:53 StaticVoid

Не очень хорошее предложение прокомментировать общие стили? проверьте решение эгари. –

ВЫ МАСТЕР :) БЛАГОДАРИМ ВАС ... И, пожалуйста, извините меня ... я немного блондинка .... –

Решение Egari крайне правильно, и это был мой первоначальный код. Однако для этой цели это лучший вариант для меня.Кроме того, он работает для всех браузеров (просто добавьте один фильтр для градиента в IE). –

В своем первом Fiddle у вас есть:

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

Так это добавление левый границы при наведении курсора мыши.

источник

2013-06-10 14:11:49

.DarkText .orangeborder

Граница левой части ".DarkText .orangeborder" переписывается границей «.DarkText .TwoBoxesDark li».

Изменение

.DarkText .orangeborder

.DarkText li.orangeborder

или

.DarkText .TwoBoxesDark li.orangeborder

будет работать.

источник

2013-06-10 14:15:43 Egari

Спасибо за предложение. Я знаю, что это работает, но моя задача при создании состоит в том, чтобы иметь несколько элементов (TwoBoxesDark/ThreeBoxesDark/FourBoxesDark и т. Д.) И несколько вариантов цвета, и когда пользователь работает с ним, он сможет создавать различные комбинации ... –

В этом случае убедитесь, что ни одно из двух правил CSS не конфликтует, либо какие-либо свойства в комбинации правил CSS не конфликтуют. В случае описанной выше проблемы «сила» или «специфика» правила «.DarkText .orangeborder» меньше, чем правило «.DarkText .TwoBoxesDark li» (второе правило более конкретное, и оно будет использовать это для противоречивых правил). :) – Egari

Спасибо @Egari ... Мне просто не хватало этой проблемы, поскольку я скорректировал ранее сделанный CSS, и это особенно касается моей ошибки ... –

Граница CSS отображается только при наведении указателя мыши?

ответ

Смежные вопросы