html - HTML 按钮上的鼠标悬停图像

Question

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

现在，在我的着陆页上 - 我有 2 个按钮可以重定向到 Apple store 或 Google play。对于 Apple Store 一切都很好，但是我想添加一个文本，该文本在通过 Google Play 按钮时会显示“即将推出!”之类的内容。

我已经尝试了一些方法，但由于我不是网络开发方面的专家，下面的结果清楚地表明膨胀......任何人都可以帮忙吗？

 

  .home {
    color: #3D464C
}
.home p {
    color: #757F86
}
.home__header {
    position: relative;
    margin-bottom: 3em;
    padding: 0 15px;
    background: url("../images/jpg/home/header.f03ddb38.jpg") 0 80% no-repeat;
    background-size: cover;
    text-align: center
}
.home__header h1 {
    margin-bottom: 100px;
    font-size: 1.8em;
    line-height: 1.4
    
}
.home__header .home__cta--web {
    position: absolute;
    bottom: -4em;
    left: 0;
    width: 100%
}
@media (min-width: 769px) {
    .home__header {
        background-size: cover;
        background-position: 50% 80%
    }
    .home__header h1 {
        margin-top: 100px;
        margin-bottom: 0;
        font-size: 2.4em
    }
}
.home__app {
    max-width: 300px;
    margin: 90px auto 30px;
    text-align: center

}
@media (min-width: 769px) {
    .home__app {
        margin: 30px auto 100px
    }
}
.home__app li {
    display: inline-block;
    margin-top: 0;
    width: 50%;
    margin-right: -.4em;
    vertical-align: middle;
    padding: 0 7.5px
}
.home__cta--web {
    display: block;
    margin-top: 2.5em
}
.home .button {
    margin-top: 0;
    -webkit-transform: translateY(50%);
    -ms-transform: translateY(50%);
    transform: translateY(50%)
}
.home__step {
    padding: 50px 15px;
    border-bottom: 1px solid #ddd
}
.home__step .illu__container {
    margin: 0 auto
}
.home__step__desc {
    max-width: 600px;
    margin: 0 auto;
    text-align: center
}
.home__step h2 {
    font-size: 2em;
    line-height: 1.4
}
.home__step--04 {
    position: relative;
    background: url("../images/jpg/home/04.9474e531.svg") no-repeat;
    background-size: 80%;
    background-position: center 0
}
@media (min-width: 769px) {
    .home__step--04 {
        background-size: 500px
    }
}
.home__step--04 .home__step__illu {
    padding: 0 40px;
    max-width: 600px;
    margin: 0 auto 30px
}
@media (min-width: 769px) {
    .home__step {
        padding: 100px 15px
    }
    .home__step--01 .home__step__illu,
    .home__step--03 .home__step__illu {
        display: inline-block;
        margin-top: 0;
        width: 50%;
        margin-right: -.4em;
        vertical-align: middle;
        padding: 0 20px
    }
    .home__step--01 .home__step__illu .illu__container,
    .home__step--03 .home__step__illu .illu__container {
        margin-right: 0
    }
    .home__step--01 .home__step__desc,
    .home__step--03 .home__step__desc {
        text-align: left;
        display: inline-block;
        margin-top: 0;
        width: 50%;
        margin-right: -.4em;
        vertical-align: middle
    }
}

<ul class="home__app hide-for-medium js-dl--app">
  <li>
    <a href="#" data-store="ios" target="_blank">
      <picture class="picture picture--no-background" style="padding-bottom: 34.88%"><img src="assets/images/svg/store/appstore--en.4c7135ef.svg" alt="Download the iOS app"></picture>
    </a>
  </li>
  <li>
    <a 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>
  </li>
</ul>

当前结果

Current outcome

Answer 1

如果我理解你的问题。每当有人将鼠标悬停在 Playstore 按钮上时，您都希望出现即将推出的文本。请使用以下代码作为引用。

注意:这里的.container div 只是一个例子。您应该将代码放在 li 中的 .container 中，并使用 img src 和其他样式进行必要的更改

.container{
  width: 50%;
  padding: 50px;
  background: #444;
  text-align: center;
}
.my-btn-class{
  position: relative;
  display: block;
}

.my-btn-class img{
max-width: 100%;
}

.my-btn-class:hover > .btn-over{
  display: flex;
}

.btn-over{
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: none;
  top: 0px;
  align-items: center;
  justify-content: center;
  color:#ddd;
  font-weight: 600;
}

<div class="container"><!--Example div. Use the below code in your li -->
<a class="my-btn-class" href="#" data-store="android" target="_blank">
      <picture class="picture picture--no-background" style="padding-bottom: 34.88%"><img src="http://via.placeholder.com/350x150" alt="Download the Android app"></picture>
      <div class="btn-over">
      Coming Soon
      </div>
</a>
</div>

希望对你有帮助