4

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

问候。

4

5 回答 5

2

这就是你的做法。如果需要，您可以在此处为链接放置一个透明的 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/

于 2013-05-23T18:36:36.903 回答
1

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

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

例子：

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

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

使用根据此的 HTML：

使用像这样的图像

  <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 的站点中获取

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

于 2013-05-23T18:29:50.713 回答
0

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

于 2013-05-23T18:22:14.217 回答
0

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

于 2013-05-23T19:59:28.913 回答
0

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

于 2014-04-15T13:53:07.423 回答