Sign in to follow this  
Followers 0
moozl

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

21 posts in this topic

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

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

Share this post


Link to post
Share on other sites

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

 

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

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

 

Share this post


Link to post
Share on other sites

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

Share this post


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>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


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

 

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

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

Share this post


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

Share this post


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

Share this post


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:

Share this post


Link to post
Share on other sites

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

fc0aeac99984t.jpg

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

Share this post


Link to post
Share on other sites

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

Share this post


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

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

moozl likes this

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.