HTML上的圖像更改懸停與彈出文本

前一段時間我做了此代碼，它做了我想要的一切，好吧，差不多。我不能爲我的生活找出如何在用戶懸停在圖像上時添加彈出文本;然後在用戶懸停圖像時消失。HTML上的圖像更改懸停與彈出文本

這裏是我的代碼的JSFiddle，以及下面。

<a href="PAGE-URL"><img src="http://www.bizreport.com/2011/02/03/android-logo-200x200.jpg" onmouseover="this.src='https://logopond.com/avatar/154827/no-bullshit.jpg'" onmouseout="this.src='http://www.bizreport.com/2011/02/03/android-logo-200x200.jpg'" /></a>

來源

2017-07-13 frong

[此鏈接]（https://codepen.io/Navedkhan012/pen/NrdLXW）被張貼在一個只有鏈路的答案，目前已被刪除。如果有幫助，我會重新發布它。 – halfer

CSS工具提示是你應該找的我估計。

.tooltip { 
 
    position: relative; 
 
    display: inline-block; 
 
    border-bottom: 1px dotted black; 
 
} 
 

 
.tooltip .tooltiptext { 
 
    visibility: hidden; 
 
    width: 120px; 
 
    background-color: black; 
 
    color: #fff; 
 
    text-align: center; 
 
    border-radius: 6px; 
 
    padding: 5px 0; 
 

 
    /* Position the tooltip */ 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 

 
.tooltip:hover .tooltiptext { 
 
    visibility: visible; 
 
}

<div class="tooltip"> 
 
    <a href="PAGE-URL"><img src="http://www.bizreport.com/2011/02/03/android-logo-200x200.jpg" onmouseover="this.src='https://logopond.com/avatar/154827/no-bullshit.jpg'" onmouseout="this.src='http://www.bizreport.com/2011/02/03/android-logo-200x200.jpg'" /></a> 
 
    <span class="tooltiptext">Tooltip text</span> 
 
</div>

來源

2017-07-13 05:41:55 terryeah

HTML上的圖像更改懸停與彈出文本

回答

相關問題