Jump to content

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

moozl
 Share Followers 0

Recommended Posts

moozl

moozl 0

Posted
Posted

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

Есть вопрос? Задай его профессиональным веб-мастерам, SEO и другим специалистам!

EwgenyUs

EwgenyUs 10

Posted
Posted

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

 

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

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

 

Link to post
Share on other sites
moozl

moozl 0

Posted
  • Author
Posted

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

moozl 0

Posted
  • Author
Posted

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

Link to post
Share on other sites
fanl2

fanl2 14

Posted
Posted
#socialbut ul li:nth-child(1):hover{  
       background-color: red; 
}

 

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

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

Link to post
Share on other sites
fanl2

fanl2 14

Posted
Posted

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

 

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

Link to post
Share on other sites
valentino

valentino 60

Posted
Posted

 

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

 

<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

moozl 0

Posted
  • Author
Posted (edited)

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

moozl 0

Posted
  • Author
Posted

Изменение 

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

valentino 60

Posted
Posted

 

 


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

 

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

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

moozl 0

Posted
  • Author
Posted

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

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Followers 0
Go to topic listing

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...