Question

我不久前制作了这段代码，它做了我想要的一切，好吧，差不多。我不能为我的生活找出当用户将鼠标悬停在图像上时如何添加弹出文本;然后当用户将图像悬停在图像上时消失。

以下是我的代码的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>

Answer 1

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>

使用弹出文本

1 个答案: