Question

我想创建一个简单的悬停效果，我有一个灰色的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/

问候。

Answer 1

这是你如何做到的。如果需要，您可以在此处为您的链接放置透明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小提琴的链接：http://jsfiddle.net/eNU8H/

Answer 2

而不是使用img标签创建div标签并将其背景图像设置为社交图标并悬停更改

Answer 3

根据您提供的网站，他们只使用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

的网站获取

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

Answer 4

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

Answer 5

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

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

5 个答案: