Мой CSS уль литий таблицы реестра отсутствует пиксель при наведении курсора меняет цвет

CSS missing parameter Мой CSS уль литий таблицы реестра отсутствует пиксель при наведении курсора меняет цвет

У меня есть парение, который изменяет цвет границы слева, но отсутствует пиксель. Как я могу это исправить?

<ul> 
    <li><a href="#">First element</a></li> 
    <li><a href="#">Second element</a></li> 
    <li><a href="#">Third element</a></li> 
</ul>

CSS:

ul { 

    list-style-type:none; 
    margin:0; 
    padding:0; 

    li { 

     border-top: 1px solid #e5e5e5; 
     border-left: 3px solid #e5e5e5; 

     &:hover { 
      border-left-color: #be0928; 
     } 
    } 
}

источник

2013-07-08 ibrahimab

Границы был митрофорный углами: http://cssdeck.com/labs/rhbuv0ou. Вы смотрите на предполагаемое поведение из-за вашей 1px сплошной верхней границы. – cimmanon

Yup. На самом деле вы не пропускаете пиксель. Возможно, вы найдете [этот более ранний вопрос] (http://stackoverflow.com/questions/13459985/border-corners-triangle), который помогает создать желаемый эффект, но я не думаю, что это можно сделать просто со стандартным синглом границы. Возможно, стоит проверить CSS3 [border-image] (http://css-tricks.com/understanding-border-image/); Я не знаю, поможет ли это ... –

Вы можете использовать box-shadow свойство имитировать границу. Как упоминалось в комментариях, свойство border действует по назначению.

Вот CSS для box-shadow трюка:

li { 
    padding: 3px 10px; 
    border-top: 1px solid #e5e5e5; 
    box-shadow: -3px 0 #e5e5e5; 
    width:150px; 
    float:left; 

    &:hover { 
     box-shadow: -3px 0 0 0 #be0928; 
    } 
}

See the JSFiddle

источник

2013-07-08 14:31:53 Girish

Мой CSS уль литий таблицы реестра отсутствует пиксель при наведении курсора меняет цвет

ответ

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