0

Добрый день всем! Как сделать так, чтобы при наведении на кнопку вертикальные разделители данной кнопки исчезали с обеих сторон, у меня исчезает только слева. Вот само меню http://jsfiddle.net/AJIEKCEU/cevKs/

2 ответа 2

1

Переформируйте Ваш CSS следующим образом(возможно, внесите где-то поправки и уберите лишнее)

div{
  width: 404px;
  margin 0 auto;
}
div ul{
  display: block; 
  background: #d0001e;
  width: 404px;
  height: 100px;
}
div ul li{
  display: block; 
  float: left;
  width: 100px;
  text-align: center;
  border-top: 1px solid #ec203d;
  border-left: 1px dotted #000;
}
div ul li a{
  display: block;
  width: 100px;
  height: 100px;
  padding: 15px 0 15px 0;
  font-family: Myriad Pro;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}
div ul li:hover{
  background: #fff; 
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
}
li:hover+li{
  border-left: 1px solid transparent;
}
a:hover{
  color: #de0524; 
}
1
  • ОООО а вот это, то что надо Благодарю
    – Karalahti
    17 янв 2013 в 9:00
0

Вот, взгляните - http://jsfiddle.net/Alex83/cevKs/12/

Если кратко, то я просто заменил first-child на last-child, ну и соответственно все border-left заменил на border-right

Удачи


Ну и еще, небольшой совет по последовательности правил, - посмотри как сделано у меня... На мой взгляд, так более наглядно. Как считаешь?

Да, и не стоит городить лишние блоки, так как элемент ul изначально является блочным, то div вполне можно выкинуть.


UPD: Исправил, перейдите по ссылке на jsfiddle еще раз.

2
  • Спасибо конечно, новы сделали тоже что и я только по другому, мне же надо чтобы при наведении на кнопку левый и правый бордер исчезали или делались под цвет меню,чтобы не было видно))
    – Karalahti
    17 янв 2013 в 8:54
  • @Karalahti, исправил.
    – Astor
    17 янв 2013 в 14:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.