Question

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

现在，在我的目标网页上 - 我有2个按钮，可以重定向到Apple商店或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和其他样式进行必要的修改

＆＃13;

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

＆＃13;

<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>

＆＃13;

希望这有帮助

在HTML按钮上滚动悬停图像

1 个答案: