将图像悬停在 html 中的按钮上答案

【问题标题】：Rollover image over a button in html将图像悬停在 html 中的按钮上
【发布时间】：2017-10-27 05:43:58
【问题描述】：

因此，我目前正在为即将上线的应用程序构建登录页面 - 但是，到目前为止，我只开发了 iOS 版本，一旦 iOS 版本上线，我将开始进行 android 开发。

现在，在我的登录页面上 - 我有 2 个按钮可以重定向到 Apple Store 或 Google Play。对于苹果商店来说，一切都很好，但是我想添加一个文本，该文本在浏览 Google Play 按钮时会显示“即将推出！”之类的内容。

这就是我的 Google 播放按钮的代码现在的样子：

<pre>
  <a class="js-link--android" href="#" data-store="android" target="_blank">
    <picture class="picture picture--no-background" style="padding-bottom: 34.88%" img src="assets/images/svg/store/playstore--en.618c3ad6.svg" alt="Download the Android app">
    </picture>
  </a>
</pre>

Google Play button on the website 我不知道该怎么做 - 如果有人能帮我解决这个问题，我会很高兴！对不起，我不太擅长 Web 开发..

【问题讨论】：

嗯...您的代码块中没有任何内容...您可能想要使用工具提示，否则将 div 放在按钮下方或上方，并通过 javascript 事件显示和消失。
@zevee 嗨，现在可以看到了吗？

标签： html css rollover

【解决方案1】：

您可以用div 包装您的picture 元素，然后您可以在CSS 中编写如下内容：

#yourlink:hover #yourdiv {
    display: block;
}
#yourlink #yourdiv {
    display: none;
}

在 div 里面你可以放 Coming Soon 并且你可以把它设置成黑色或者其他什么

另外，我不确定这是否可行，您可以尝试将 div 放在图片的内部，然后将 CSS 中选择器的顺序颠倒过来

【讨论】：

我不确定我理解你的意思...这是我的 CSS 目前的内容：
```
 .jobs__container { margin: 100px 0 60px;文本对齐：居中 } 
```
但是我在任何地方都没有 div？我正在使用 SVG 文件来显示当前图像？对不起，如果我感到困惑
现在明白你的意思了，但现在我在方框上方写了“即将推出”，方框在下方移动
我已经编辑了我的问题并上传了我当前代码的屏幕截图
确保结束 div 标记在图片元素之后，如下所示：<div blah blah blah><picture blah blah blah></picture></div> 我不太确定（因为您没有发布那么多代码）但您可以更改图像的 z-index 像 -1 或其他东西......