HTML

Question

Nub编码，但我跟着

此链接---＆gt; http://stradegyadvertising.com/tutorial-how-to-image-hover-swap-css/

我无法将鼠标悬停在facebook png图标上并将其更改为facebook_blue png。不确定我是否应该使用后台网址标记我正在绘制空白

HTML

<a href="https://www.facebook.com/ecthephotographer">
<img src="social-icons/facebook.png" alt="Follow me on Facebook" 
class="social-icon" id="fb"></a>

CSS

#fb {
    max-width: 4%;
    max-height: 4%;
    background-image: url(social-icons/facebook_blue.png);
    background-position: 0 0;
}
#fb:hover {
    background-position: 0 100%;
}

您可以在这里下载两个png

http://tinypic.com/4dulp1mt

Answer 1

首先从<img>中删除src，因为你已经在css

中删除了它

<img alt="Follow me on Facebook">

然后在css中

 img {
    height:100px;
    width:100px;
    background-image:url('http://i58.tinypic.com/2j0yqfn.jpg');
    background-size:100px 100px;
    background-repeat:no-repeat;
}

img:hover {
    background-image:url('http://i62.tinypic.com/2guywih.jpg');
}

DEMO

最大宽度：4％;最大高度：4％;太小了，除非你有一个巨大的屏幕，否则你甚至都看不到图像。当我希望它根据屏幕尺寸停止变宽时，我通常会使用max-width。

Answer 2

我竖起大拇指

我建议您更改一下代码以使其可重用。例如，您可能需要添加一个推特按钮或通过向第一个添加一个类并覆盖高度和宽度来更改所有社交按钮的大小。

一般情况下，尽量避免在一个类中执行所有操作，尽可能多地拆分代码并组合块。

玩得开心!!! ;）

<强> HTML

<a href="https://www.facebook.com/ecthephotographer" class="social-btn facebook" >
    <img alt="Follow me on Facebook" class="social-icon"/>
</a>

<强> CSS

//code for all your social buttons    
.social-btn .social-icon{
    height:100px;
    width:100px;
    background-size:100px 100px;
    background-repeat:no-repeat;
}

//code for your facebook buttons
.social-btn.facebook .social-icon {   
    background-image:url('http://i58.tinypic.com/2j0yqfn.jpg'); 
}

.social-btn.facebook .social-icon:hover {
    background-image:url('http://i62.tinypic.com/2guywih.jpg');
}

<强> DEMO

Answer 3

所以我有额外的帮助，但这更多是我需要的代码

HTML

<a href="https://www.facebook.com/ecthephotographer" id="fb">
<img src="social-icons/facebook.png" alt="Follow me on Facebook" class="social-icon" id="fb"></a>

CSS

#fb {

      background-position: 0 0;
      max-height: 4%;
      max-width: 4%;
    }

#fb:hover {
  content: url('../social-icons/facebook_blue.png');
  background-position: 0 100%;
 clear: both;
  margin: 0 2%;
}

希望将来有人可能需要这个

Answer 4

要通过转换做同样的事情，你可以做到

HTML

<a href="https://www.facebook.com/ecthephotographer" class="social-btn facebook">
   <img alt="Follow me on Facebook" class="social-icon rollover" src="http://i58.tinypic.com/2j0yqfn.jpg"/>
   <img alt="Follow me on Facebook" class="social-icon" src="http://i62.tinypic.com/2guywih.jpg" />
</a>

CSS

.social-btn {
  display: inline-block; 
  position: relative;    
}


.social-btn .social-icon {
  display: inline-block;
  height:100px;
  width:100px;  
  opacity: 1;    
}

.social-btn .social-icon.rollover {
  position: absolute;
}


.social-btn:hover .social-icon.rollover {
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;

  opacity: 0;
}

请记住，您在css中添加的花哨效果越多，代码的可维护性就越低，并且在某些浏览器中不支持某些内容的风险也会增加。 +少即是多。如果你发现自己玩CSS很多，可以考虑使用{LESS}或Sass Superscript。当你使用大量的CSS时，它们非常有用。

此外，如果您不熟悉Web开发，请考虑查看引导框架。看一些定义好的CSS。这是一个很好的样板。

<强> DEMO

与png图标CSS滚动

4 个答案:

HTML

CSS