Помогите с настройкой CSS-кода

[moozl 0]

Всем привет! Помогите пожалуйста разобраться с 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);
}

Заранее, спасибо!

[EwgenyUs 10]

background-position:0 -99px; указывает позицию изображения. Дорисовываете кнопки при наведении в само изображение и потом

 

• #socialbut ul li a:hovet span.fb {
• background-position:0 значение;
• }

В качестве значения укажите позицию активной кнопки фейсбука и т.д.

 

[valentino 60]

используем псевдоэлемент nth-child , а если хотите конкретной помощи - выложите тут код кнопок...

[moozl 0]

используем псевдоэлемент 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>

[moozl 0]

EwgenyUs, вы неверно меня поняли. Нужно не дорисовать новые кнопки, а изменить цвет ихней подсветки, при наведении курсора так, чтобы для каждой социалки цвет был разный.

[Roulf 38]

Нужно для каждого класса кнопки прописать

1. .класс кнопки a:hover {цвет и прочие атрибуты }

А у вас он только для id socialbut общий.

[fanl2 14]

#socialbut ul li:nth-child(1):hover{  

       background-color: red; 

}

 

nth-child(1) - обращаемся к первому тегу li

hover - обработка при наведение курсорам 

[Stripes 31]

Я бы сделал разный класс для каждой кнопки, как сказали выше.

[fanl2 14]

Я бы сделал разный класс для каждой кнопки, как сказали выше.

 

Нету смысла усложнять код новыми классами. Если можно обратится через css.

[dontfear 762]

#socialbut span.vk:hover {

background:#000000;

}

[webelion 133]

Давайте помогу вам... бесплатно.

[dastyle 49]

на http://www.ntv.ru/tv/ что то похожее загляните в их css.

[valentino 60]

 

Очень хочу помощи.   

 

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

[moozl 0]

#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

[moozl 0]

Изменение 

#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! 

[valentino 60]

 

 

HELP!

 

выше выложил...

[moozl 0]

выше выложил...

После добавления кода при наведении курсора вот такая картина. Почему-то белым цветом заливает...

[valentino 60]

дайте ссылку на сайт в личку

[Denis_Pi 6]

Дате ссылку на ваш сайт в личку - получите от меня готовый - рабочий код здесь!

[valentino 60]

 

 

После добавления кода при наведении курсора вот такая картина. Почему-то белым цветом заливает...

 

моя ошибка...вот так будет цвета менять:

#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 0]

valentino, спасибо Вам большущее за помощь! Я потом еще вытащу оригинальные цвета логотипов социалок и вообще классно будет! Спасибо еще раз!

Denis_Pi, спасибо, но вот уже, собственно, все разрулили.