悬停时隐藏文本并显示图像

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

#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;
}

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

Answer 2

你可以使用 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';
};

Answer 3

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

所以我直接在 a 上设置 id #facebook 如果你想让它表现得像 div 只需将 display:block 添加到 a#facebook

其次，我在悬停 visibility:hidden 时隐藏了文本，您也可以使用 opacity:0 。在这种情况下，这无关紧要。

keep in mind that you can use transition with opacity but not with visibility

然后在 :hover 上添加一个 background-image 到 #facebook 元素（你可以添加任何你喜欢的 url ）

如果有帮助请告诉我 ;)

#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/Whosebug/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 4

类似的东西？

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 5

您需要 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>

悬停时隐藏文本并显示图像

Hide text on hover and show an image

html

css

show

hover

hide