Jump to content

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


Recommended Posts

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

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

 

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

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

 

Link to post
Share on other sites

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

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

Link to post
Share on other sites
#socialbut ul li:nth-child(1):hover{  
       background-color: red; 
}

 

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

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

Link to post
Share on other sites

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

 

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

Link to post
Share on other sites

 

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

 

<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

#socialbut span.vk:hover {

background:#000000;

}

Вот, что вышло:

89d15f6e345dt.jpg

Цвет меняется только тогда, когда наводишь на логотип социалки. Цветной квадрат выводится на передний план.

 

Вообще, мне кажется, что изменять надо здесь, не?

 

#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 by moozl
Link to post
Share on other sites

Изменение 

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

Дало такой результат:
7895fd3fa578t.jpg
Причем, все остальное перестало работать!
HELP!  :wacko:

Link to post
Share on other sites

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

fc0aeac99984t.jpg

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

Link to post
Share on other sites

 

 


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

 

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

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

только цвет фона на свой поменяйте

Link to post
Share on other sites

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

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

Link to post
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...