如何在 css 中为我的社交图标做悬停效果？答案

【问题标题】：How can I do a hover effect for my social icons in css?如何在 css 中为我的社交图标做悬停效果？
【发布时间】：2013-05-19 05:48:07
【问题描述】：

我想创建一个简单的悬停效果，我有一张灰色的 facebook、twitter 和 youtube 图像，当它悬停时，我想从社交媒体获取原始颜色，这就是我想要的。

这是我的html。

            <div class="social-top">

                <ul>
                    <li><a href=""><img src="images/social/fb.png"></a></li>
                    <li><a href=""><img src="images/social/twitter.png"></a></li>
                    <li><a href=""><img src="images/social/yt.png"></a></li>
                </ul>

            </div>

这是我的 CSS。

.social-top {
    width: 150px;
    padding-left: 650px;
}

.social-top li {

    display: inline-block;
    width: 40px;
}

.social-top a {
    display: block;
    overflow: hidden;
    height: 30px;
    position: absolute;
}

.social-top a:hover {
    top: 30px;
}

还有一个网站，有我想要的效果：

http://lalomacd.com.mx/2013/

问候。

【问题讨论】：

你用铬吗？按F12跟着它，看看图片是怎么做的。lalomacd.com.mx/2013/wp-content/themes/laloma-theme-second/…我是用网站的css找到的，是透明背景的图片
lalomacd.com.mx/2013/wp-content/themes/laloma-theme-second/… 等等...

标签： html css hover social

【解决方案1】：

而不是使用 img 标签创建 div 标签并将其背景图像设置为社交图标，然后在悬停时更改它们

【讨论】：

【解决方案2】：

根据您提供的网站，他们只是用两张想要的图片制作了一张图片。

在悬停时他们只是改变背景位置。

例子：

.srss{
         background-image:url(images/rss-icon.png);
         background-position:bottom;
 }

 .srss:hover{
    background-position:top;
 }

根据这样的HTML：

使用像this one这样的图片

  <a href="http://lalomacd.com.mx/2013/feed/" target="blank"><img class="srss" src="http://lalomacd.com.mx/2013/wp-content/themes/laloma-theme-second/images/blank.png" alt=""></a>

所有这些你都可以直接从网站查看源代码和css得到它

当然这不是唯一的方法，你可以改变背景图片而不是背景位置，但所有这些都是你最喜欢的方式

【讨论】：

【解决方案3】：

这就是你的做法。如果需要，您可以在此处为链接放置一个透明的 PNG，而不是文本。或者，您可以使用一些字体图标库进行查看，这些库使用文本为您创建社交媒体图标。例如，查看 Fontello。 http://fontello.com/

这是我为你的效果写的代码：

    <div class="social-top">

    <ul>
        <li class="facebook"><a href="#self">F</a></li>
            <li class="twitter"><a href="#self">T</a></li>
                <li class="youtube"><a href="#self">YT</a></li>
    </ul>

</div>



.social-top {
   float: right;
 }

.social-top li {

display: inline-block;
width: 40px;
height: 40px;
background-color: #ccc;
border-radius: 150px;
}

.social-top li.facebook:hover {
background-color: #006;

}

.social-top li.twitter:hover {
   background-color: #060;

}

 .social-top li.youtube:hover {
  background-color: #600;

 }

.social-top li:hover a {
       color: #fff;
}

.social-top a {
 display: block;
   line-height: 40px;
   text-align: center;
   width: 100%;
  height: 100%;
 }

这里是 js fiddle 的链接：http://jsfiddle.net/eNU8H/

【讨论】：

谢谢。请务必将您的问题标记为已回答并投票给我！ :-)

【解决方案4】：

他们只是使用图像精灵。将背景图像设置为精灵的路径。在普通视图中，设置背景位置以查看深色图标。在悬停状态下，将背景位置更改为带有彩色图标的精灵部分。

【讨论】：

【解决方案5】：

您可能还想结帐http://perfecticons.com。那里有一些悬停效果。

【讨论】：