Задать вопрос
@MicroVK
html

Как сделать различные цвета для ul li.acive?

Мне нужно присвоить кнопкам различные цвета при наведении, но так как сайт сверстан на Bootstrap, получилось много кода и мне стало это не по силам... Помогите пожалуйста!

<div id=social-area class=page>
<div class=container>
<div class=row>
<div class=span12>
<nav id=social>
<ul>
<li><a href="http://vk.com/share.php?url=http://microvk.ru/" title="Поделиться в ВК" target=_blank><span class=font-icon-social-bold></span></a></li>
<li><a href="http://twitter.com/home?status=MicroVK (Beta) — приложение на Windows для удобного пользования социальной сетью ВКонтакте - microvk.ru" title="Твитнуть" target=_blank><span class=font-icon-social-twitter></span></a></li>
<li><a href="https://www.facebook.com/sharer.php?u=http://microvk.ru/" title="Поделиться в Facebook" target=_blank><span class=font-icon-social-facebook></span></a></li>
<li><a href="https://plus.google.com/share?url=http://microvk.ru/" title="Поделиться в g+" target=_blank><span class=font-icon-social-google-plus></span></a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>

#social-area{text-align:center;}
#social-area #social ul{margin:0;padding:0;}
#social-area #social ul li{display:inline-block;margin-left:30px;list-style:none;cursor:pointer;}
#social-area #social ul li:first-child{margin-left:0;}
#social ul li a{display:block;width:70px;height:70px;background:#222222;-webkit-transition:all 400ms ease-out 0s;-moz-transition:all 400ms ease-out 0s;-o-transition:all 400ms ease-out 0s;transition:all 400ms ease-out 0s;-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);}
#social ul li a span{display:inline-block;margin:0;color:#55606a;font-size:32px;line-height:70px;opacity:0.3;filter:alpha(opacity=30);-webkit-transition:all 400ms ease-out 0s;-moz-transition:all 400ms ease-out 0s;-o-transition:all 400ms ease-out 0s;transition:all 400ms ease-out 0s;-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);}
#social ul li:hover a,
#social ul li.active a{background-color:#DE5E60;-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);}
#social ul li:hover a span,
#social ul li.active a span{color:#FFFFFF;opacity:1;filter:alpha(opacity=100);-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg);}
  • Вопрос задан
  • 2429 просмотров
Комментировать
Подписаться 2 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 2
AlexanderTsymbal
@AlexanderTsymbal
tsymbal.su
используй
#social ul li:nth-child(1) a {цвета} /* для ссылки внутри первого li */
#social ul li:nth-child(2) a {цвета} /* для ссылки внутри второго li */
#social ul li:nth-child(3) a {цвета} /* и т.д. */
#social ul li:nth-child(4) a {цвета}
Ответ написан
8 комментариев
8 комментариев
@Tashiro
не советую использовать nth-child(n) а если вы ссылки местами захотите поменять?
чтобы не городить классов используйте такие слекторы
#social a[href^="http://vk.com"] {}
#social a[href^="http://vk.com"]:hover {}

итд
погуглите селекторы атрибутов.
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Разработка мобильного приложения с интеграцией из WhatsApp
23 апр. 2024, в 18:23
200000 руб./за проект
Необходимо отверстать страницу сайта с мобильной версией и адаптивным
23 апр. 2024, в 17:59
1000 руб./в час
Разместить объявления на Авито
23 апр. 2024, в 17:47
10000 руб./за проект
Ещё заказы