[Помогите] Помогите добавить в hover ещё одно свойство

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем osobist, 15 фев 2015.

  1. osobist

    osobist

    Регистрация:
    15 фев 2015
    Сообщения:
    1
    Симпатии:
    0
    Умные дядьки! Подскажите . Есть код чёрно-белых социальных кнопок для сайта и в нем прописан стиль,при наведении они закручиваются на 360 градусов.Плюс к этому я хочу, чтобы они менялись на цветные.Как и куда нужно прописать ссылку на цветную кнопку.

    код
    <style> a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }</style>
    <div id="social">
    <!-- ShareButtons -->
    <!-- odnoclassniki -->
    <div class="sharebuttons">
    <noindex><nofollow><a rel="nofollow" target="blank" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=<?php the_permalink(); ?>&title=<?php the_title(); ?>"><img src="http://superprogress.ru/images/od.png" width="40" height="40" title="В Одноклассники"></a></noindex></nofollow></div>
    <!-- mail.ru -->
    <div class="sharebuttons">
    <noindex><nofollow><a rel="nofollow" target="blank" href="http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>"><img src="http://superprogress.ru/images/ma.png" width="40" height="40" title="Поделиться в Mail.ru"></a></noindex></nofollow></div>
    <!-- facebook -->
    <div class="sharebuttons">
    <noindex><nofollow><a rel="nofollow" target="blank" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>"><img src="http://superprogress.ru/images/fc.png" width="40" height="40" title="Поделиться в Facebook"></a></noindex></nofollow></div>
    <!-- twitter -->
    <div class="sharebuttons">
    <noindex><nofollow><a rel="nofollow" target="_blank" href="http://twitter.com/intent/tweet?text=RT <?php the_title(); ?>: <?php the_permalink(); ?>" title="Добавить в Twitter"><img src="http://superprogress.ru/images/tv.png" alt="Опубликовать в twitter.com" width="40" height="40"></a></noindex></nofollow></div>
    <!-- vkontakte -->
    <div class="sharebuttons">
    <noindex><nofollow><a rel="nofollow" target="blank" href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>"><img src="http://superprogress.ru/images/vk.png" width="40" height="40" title="Поделиться В Контакте"></a></noindex></nofollow></div>
    <!-- livejournal -->
    <div class="sharebuttons">
    <noindex><nofollow><a rel="nofollow" target="blank" href="http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&title=<?php the_title(); ?>"><img src="http://superprogress.ru/images/lj.png" width="40" height="40" title="Поделиться в ЖЖ"></a></noindex></nofollow></div>
    <!-- rss -->
    <div class="sharebuttons">
    <noindex><nofollow><a rel="nofollow" target="blank" href="http://feeds.feedburner.com/SuperProgressru">
    <img src="http://superprogress.ru/images/rss.png" width="40" height="40" title="Подписаться!"></a></noindex></nofollow></div>
    <!-- ShareButtons -->
    </div>
     
  2. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    559
    Ну сейчас ты не сделаешь из них цветные, т.к. залиты они у тебя картинками, а не фоном. Для фона возьми сделай мини-спрайт и повесь на <a> класс с каждой картинкой.
    Потом при ховере будешь менять bg-position и все будет ок.

    Или если есть желание, то можешь через канвас цвет добавить. Но в это случаи нужно будет изначально цветные картинки залить
     
  3. Gevano

    Gevano

    Регистрация:
    11 янв 2015
    Сообщения:
    34
    Симпатии:
    5
    Переделай иконки соц.сетей в спрайты. (Ч/б +цветной вариант) Вот удобный простой сервис: http://csssprites.com/
    Далее добавь класс к img , убери src а путь укажи через CSS.