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

2023年12月17日 252次阅读

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

问候.

最佳答案 这就是你如何做到的.如果需要,您可以在此处为您的链接放置透明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/

点赞