将鼠标悬停在图像上

Question

我正在做一个页面，我现在正在弄乱一些图像，但图像悬停根本不起作用，我应该在主图像后面但它应该是作为它的一部分显示在两侧，如果我纠正它的位置在图像的后面，它是显而易见的。

如何隐藏只在悬停时出现？

这里我发送html和css。

<div class="social-icons">
        <a class="ImgOnHover" href="https://pt-pt.facebook.com/"><img src="img\facebook.png" alt="Facebook" height="30" width="30"></a>
</div>

下面是css：

.social-icons{
 text-align: right;
 padding-right: 15px;
 padding-top: 10px;
 margin-bottom: 25px;
 }

.ImgOnHover{
 display: inline-block;
 width: 50px;
 background: url('img/facebook-hover.png') no-repeat;
}

.ImgOnHover:hover img {
  visibility: hidden;
}

Answer 1

我真的不知道你想要达到的目标，但这肯定不是我想要的方式。

你不能做这样的事吗？

https://codepen.io/anon/pen/JNmoGw

<div class="social-icons">
        <a class="ImgOnHover" href=""></a>
</div>


.social-icons{
 text-align: right;
 padding-right: 15px;
 padding-top: 10px;
 margin-bottom: 25px;
 }

.ImgOnHover{
 display: inline-block;
 width: 50px;
 background: url('https://image.flaticon.com/teams/new/1-freepik.jpg') no-repeat top left;
 background-size:100%;
 content: "";
 height:50px;
}

.ImgOnHover:hover{
 background: url('http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png') no-repeat top left;
 background-size:100%;
}

Answer 2

如果您将其添加到CSS中，它会匹配：

.ImgOnHover img {
  width: 50px;
  height: auto;
}

示例：https://jsfiddle.net/1r0xa9ox/3/

根据您编辑过的问题，如果您希望隐藏它并在您悬停时显示，请将样式切换为：

.ImgOnHover img {
  width: 50px;
  height: auto;
  visibility: hidden;
}
.ImgOnHover:hover img {
  visibility: visible;
}