將鼠標懸停在圖像上

我正在做一個頁面，我現在正在搞亂一些圖像，但圖像懸停根本不起作用，我不應該在主圖像背後，因爲它應該是它，但它作爲它的一部分向兩側展示，如果我更正了它在圖像後面的位置，那麼它就在那裏。將鼠標懸停在圖像上

如何隱藏只在懸停時出現？

這裏我發送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; 
}

來源

2017-05-18 luis montez

在這裏得到一些想法。 https://www.w3schools.com/howto/howto_css_image_overlay.asp – tech2017

你期望在*前景*圖像元素上放置**背景**圖像做什麼？ – Quentin

@Quentin你能解釋一下嗎？ –

我真的不知道你想達到什麼目的，但是這絕對不是我會做的方式。

難道你不能只是做這樣的事情呢？

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

來源

2017-05-18 15:15:17 Nick

如果您添加到您的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; 
}

來源

2017-05-18 15:15:26

將鼠標懸停在圖像上

回答

相關問題