moozl 0 Posted February 8, 2014 Report Share Posted February 8, 2014 Всем привет! Помогите пожалуйста разобраться с css-кодом. Мы имеем вот такие социальные кнопки. Как изменить код, чтобы при наведении курсора на социалки, они подсвечивались РАЗНЫМИ цветами, а не одинаковым зеленым?Код из CSS: #socialbut a { color:#ccc; display:block; font-size:13px; padding:5px 0; text-align:center; width:100px; } #socialbut ul li a span { background:url('../images/socialb.png') no-repeat; display:block; font-size:0; height:30px; margin:2px auto 0; width:30px; z-index:10; } #socialbut ul li a span.vk { background-position:0 -34px; } #socialbut ul li a span.twitter { background-position:0 -68px; } #socialbut ul li a span.google { background-position:0 -99px; } #socialbut ul li a span.fb { background-position:0 -133px; } #socialbut ul li a span.ok { background-position:0 -170px; } #socialbut a:hover { color:#fff; background:url('../images/arrow-left.png') 0 50% no-repeat scroll #8bb312; box-shadow:0 1px 0 rgba(255, 255, 255, 0.2) inset; text-shadow:0 1px 1px rgba(0,0,0,.3); } Заранее, спасибо! Link to post Share on other sites
EwgenyUs 10 Posted February 8, 2014 Report Share Posted February 8, 2014 background-position:0 -99px; указывает позицию изображения. Дорисовываете кнопки при наведении в само изображение и потом #socialbut ul li a:hovet span.fb { background-position:0 значение; } В качестве значения укажите позицию активной кнопки фейсбука и т.д. Link to post Share on other sites
valentino 60 Posted February 8, 2014 Report Share Posted February 8, 2014 используем псевдоэлемент nth-child , а если хотите конкретной помощи - выложите тут код кнопок... Link to post Share on other sites
moozl 0 Posted February 8, 2014 Author Report Share Posted February 8, 2014 используем псевдоэлемент nth-child , а если хотите конкретной помощи - выложите тут код кнопок... Очень хочу помощи. <div id="socialbut" class="rcol"> <ul> <li><a href="#"><span class="rss"></span>RSS лента</a></li> <li><a href="#"><span class="vk"></span>ВКонтакте</a></li> <li><a href="#"><span class="twitter"></span>Twitter</a></li> <li><a href="#"><span class="google"></span>Google +</a></li> <li><a href="#"><span class="fb"></span>Facebook</a></li> <li><a href="#"><span class="ok"></span>Одноклассники</a></li> </ul> </div> Link to post Share on other sites
moozl 0 Posted February 8, 2014 Author Report Share Posted February 8, 2014 EwgenyUs, вы неверно меня поняли. Нужно не дорисовать новые кнопки, а изменить цвет ихней подсветки, при наведении курсора так, чтобы для каждой социалки цвет был разный. Link to post Share on other sites
Roulf 38 Posted February 8, 2014 Report Share Posted February 8, 2014 Нужно для каждого класса кнопки прописать .класс кнопки a:hover {цвет и прочие атрибуты }А у вас он только для id socialbut общий. Link to post Share on other sites
fanl2 14 Posted February 8, 2014 Report Share Posted February 8, 2014 #socialbut ul li:nth-child(1):hover{ background-color: red; } nth-child(1) - обращаемся к первому тегу li hover - обработка при наведение курсорам Link to post Share on other sites
Stripes 31 Posted February 8, 2014 Report Share Posted February 8, 2014 Я бы сделал разный класс для каждой кнопки, как сказали выше. Link to post Share on other sites
fanl2 14 Posted February 8, 2014 Report Share Posted February 8, 2014 Я бы сделал разный класс для каждой кнопки, как сказали выше. Нету смысла усложнять код новыми классами. Если можно обратится через css. Link to post Share on other sites
dontfear 762 Posted February 8, 2014 Report Share Posted February 8, 2014 #socialbut span.vk:hover { background:#000000; } Link to post Share on other sites
webelion 133 Posted February 8, 2014 Report Share Posted February 8, 2014 Давайте помогу вам... бесплатно. Link to post Share on other sites
dastyle 49 Posted February 8, 2014 Report Share Posted February 8, 2014 на http://www.ntv.ru/tv/ что то похожее загляните в их css. Link to post Share on other sites
valentino 60 Posted February 8, 2014 Report Share Posted February 8, 2014 Очень хочу помощи. <div id="socialbut" class="rcol"> <ul> <li><a href="#"><span class="rss"></span>RSS лента</a></li> <li><a href="#"><span class="vk"></span>ВКонтакте</a></li> <li><a href="#"><span class="twitter"></span>Twitter</a></li> <li><a href="#"><span class="google"></span>Google +</a></li> <li><a href="#"><span class="fb"></span>Facebook</a></li> <li><a href="#"><span class="ok"></span>Одноклассники</a></li> </ul> </div> не понятно назначение пустого спана внутри ссылки... css: #socialbut ul li a:hover:nth-child(1) {background-color:#ffffff;} #socialbut ul li a:hover:nth-child(2) {background-color:#000000;} #socialbut ul li a:hover:nth-child(3) {background-color:#333333;} #socialbut ul li a:hover:nth-child(4) {background-color:#cc0000;} #socialbut ul li a:hover:nth-child(5) {background-color:#ff6600;} #socialbut ul li a:hover:nth-child(6) {background-color:#ffff00;} Link to post Share on other sites
moozl 0 Posted February 8, 2014 Author Report Share Posted February 8, 2014 (edited) #socialbut span.vk:hover { background:#000000; } Вот, что вышло: Цвет меняется только тогда, когда наводишь на логотип социалки. Цветной квадрат выводится на передний план. Вообще, мне кажется, что изменять надо здесь, не? #socialbut a:hover { color:#fff; background:url('../images/arrow-left.png') 0 50% no-repeat scroll #9b0a16; box-shadow:0 1px 0 rgba(255, 255, 255, 0.2) inset; text-shadow:0 1px 1px rgba(0,0,0,.3); } Edited February 8, 2014 by moozl Link to post Share on other sites
moozl 0 Posted February 8, 2014 Author Report Share Posted February 8, 2014 Изменение #socialbut a:hover { color:#fff; background:url('../images/arrow-left.png') 0 50% no-repeat scroll #9b0a16; box-shadow:0 1px 0 rgba(255, 255, 255, 0.2) inset; text-shadow:0 1px 1px rgba(0,0,0,.3); } На #socialbut a span.ok:hover { color:#fff; background:url('../images/arrow-left.png') 0 50% no-repeat scroll #ffba00; box-shadow:0 1px 0 rgba(255, 255, 255, 0.2) inset; text-shadow:0 1px 1px rgba(0,0,0,.3); } Дало такой результат:Причем, все остальное перестало работать!HELP! Link to post Share on other sites
valentino 60 Posted February 8, 2014 Report Share Posted February 8, 2014 HELP! выше выложил... Link to post Share on other sites
moozl 0 Posted February 8, 2014 Author Report Share Posted February 8, 2014 выше выложил... После добавления кода при наведении курсора вот такая картина. Почему-то белым цветом заливает... Link to post Share on other sites
valentino 60 Posted February 8, 2014 Report Share Posted February 8, 2014 дайте ссылку на сайт в личку Link to post Share on other sites
Denis_Pi 6 Posted February 9, 2014 Report Share Posted February 9, 2014 Дате ссылку на ваш сайт в личку - получите от меня готовый - рабочий код здесь! Link to post Share on other sites
valentino 60 Posted February 9, 2014 Report Share Posted February 9, 2014 После добавления кода при наведении курсора вот такая картина. Почему-то белым цветом заливает... моя ошибка...вот так будет цвета менять: #socialbut ul li:nth-child(1) a:hover {background-color:#cc0000;} #socialbut ul li:nth-child(2) a:hover {background-color:#000000;} #socialbut ul li:nth-child(3) a:hover {background-color:#333333;} #socialbut ul li:nth-child(4) a:hover {background-color:#cc0000;} #socialbut ul li:nth-child(5) a:hover {background-color:#ff6600;} #socialbut ul li:nth-child(6) a:hover {background-color:#ffff00;} только цвет фона на свой поменяйте moozl 1 Link to post Share on other sites
moozl 0 Posted February 9, 2014 Author Report Share Posted February 9, 2014 valentino, спасибо Вам большущее за помощь! Я потом еще вытащу оригинальные цвета логотипов социалок и вообще классно будет! Спасибо еще раз!Denis_Pi, спасибо, но вот уже, собственно, все разрулили. Link to post Share on other sites
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now