在悬停时隐藏文字并显示图像

Question

我制作了一个带有一些文字的按钮，我希望文字在悬停时消失，并在其位置显示图像。这是HTML代码：

#facebook {
  width: 200px;
  height: 50px;
  border-style: solid;
  border-color: white;
  border-width: 1px;
  border-radius: 7px;
  line-height: 50px;
  display: table-cell;
  transition-timing-function: ease-in-out;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
}
#facebook:hover {
  width: 200px;
  height: 50px;
  border-style: solid;
  border-color: white;
  line-height: 50px;
  background: rgba(59, 89, 152, .6);
}

<a href="https://www.facebook.com">
  <div id="facebook"><span id="text">Facebook</span>
  </div>
</a>

所以基本上我想要一个Facebook徽标而不是文字。我试图独自完成，但我失败了。有谁知道如何做到这一点？

Answer 1

那样的东西？

https://jsfiddle.net/d04pLr6q/

#facebook { 
width: 200px; 
height: 50px; 
border-style: solid; 
border-color: white;
border-width: 1px;
border-radius: 7px;
line-height: 50px;
display: table-cell;
transition-timing-function: ease-in-out;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
background-color: rgba(59, 89, 152, 1);
overflow:hidden;
text-align: center;
color:white;
}
a{
text-decoration:none;
}
#facebook:hover{ 
width: 200px; 
height: 50px; 
border-style: solid; 
border-color: white;
line-height: 50px;
background-image: url(http://www.underconsideration.com/brandnew/archives/facebook_2015_logo_detail.png);
background-size: 100%;
background-position: center;
color: transparent;
}

您可以将此facebook img替换为任何徽标。它不完美但纯粹的CSS：）

Answer 2

我建议您不要在div内使用a。它可能会导致错误。所以我改变了你的html结构（解决方案与你的html结构一样）。

所以我将id #facebook直接设置在a上，如果您希望它的行为类似于div，只需将display:block添加到a#facebook }}

第二，我在使用visibility:hidden悬停时隐藏了文字，您也可以使用opacity:0。在这种情况下，这没关系。

  

保持 时请注意，您可以transition使用opacity但不能使用visibility

然后在:hover上向background-image元素添加#facebook（您可以添加任何您喜欢的网址）

让我知道它是否有帮助;）

#facebook { 
width: 200px; 
height: 50px; 
border-style: solid; 
border-color: white;
border-width: 1px;
border-radius: 7px;
line-height: 50px;
display: table-cell;
transition-timing-function: ease-in-out;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;

transition: all 0.5s;
background-position:center center;
}

#facebook:hover{ 
width: 200px; 
height: 50px; 
border-style: solid; 
border-color: white;
line-height: 50px;
background-color: rgba(59, 89, 152, .6);
background-image:url("http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico");
background-repeat:no-repeat;

}
#facebook:hover #text {
  visibility:hidden;
 
}

<a href="https://www.facebook.com" id="facebook"><span id="text">Facebook</span></a>

Answer 3

你需要2块悬停CSS。请参阅下面的示例并根据需要进

#facebook { 
width: 200px!important; 
height: 50px!important; 
border-style: solid; 
border-color: white;
border-width: 1px;
border-radius: 7px;
line-height: 50px;
display: table-cell;
transition-timing-function: ease-in-out;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
position: relative;
display: inline-block;

}


img {
    width: auto;
    height: 50px;
    display: none;
  
}

#facebook:hover img { 
display: block;
  height: 50px;
  width: auto;

}

#facebook:hover #text { 
display: none;
}

#facebook img {
    width: 100%;
    height: auto;
}

<a href="https://www.facebook.com">

<div id="facebook">

<span id="text">Facebook</span>

<img src ="http://i65.tinypic.com/2evxmqs.jpg" width="150px" height="45px" />

</div></a>

Answer 4

＆＃13;

＆＃13;

#facebook {
  width: 200px;
  height: 50px;
  border-style: solid;
  border-color: white;
  border-width: 1px;
  border-radius: 7px;
  line-height: 50px;
  display: table-cell;
  transition-timing-function: ease-in-out;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
}
#facebook:hover {
  width: 200px;
  height: 50px;
  border-style: solid;
  border-color: white;
  line-height: 50px;
  background: rgba(59, 89, 152, .6);
}
#facebook span {
  transition-timing-function: ease-in-out;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -ms-transition: all 0.5s;
  transition: all 0.5s;
}
#facebook:hover span {
  color: transparent;
}

＆＃13;

<a href="https://www.facebook.com">
  <div id="facebook"><span id="text">Facebook</span>
  </div>
</a>

＆＃13;

＆＃13;

＆＃13;

Answer 5

你可以使用JavaScript。

document.getElementById('facebook').onmouseover = function(){
    document.getElementById('facebook').innerHTML = '';
    document.getElementById('facebook').style.backgroundImage = 'url(pic.jpg)';
    document.getElementById('facebook').style.backgroundSize = 'cover';
};
document.getElementById('facebook').onmouseout = function(){
    document.getElementById('facebook').innerHTML = 'Facebook';
    document.getElementById('facebook').style.backgroundImage = 'none';
};