Question

我有这个小问题，所以这里是codepen上的代码 https://codepen.io/Dumdumdurum/pen/erMMyx

    <div id="button" onclick="showOverlayFunction()"></div>
<section class="OVERLAY hidden">
            <a>MODERNIST CUISINE</a>
            <a href="http://www.barbelo.com.pl/imprint?sm" target="_blank">IMPRINT MEDIA</a>
            <a href="http://www.barbelo.com.pl" target="_blank">WYDAWNICTWO BARBELO</a>
            <button id="hideOverlay" onclick="hideOverlayFunction()">RETURN</button>
        </section>

CSS：

    section.OVERLAY{
  background-color: rgba(30, 127, 136, 0.9);
  height: 99vh;
  width: 99vw;
  position: fixed;
  top: 0;
  z-index: 500;
  margin: 0;
  padding: 0;
  //display: none;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  font-size: 60px;
  font-family: "PT sans";
  letter-spacing: 5px;
  @media only screen and (max-width: 720px) {
    font-size: 14px;
    line-height: 30px;
  }
  @media only screen and (min-device-width: 320px) and (max-device-width: 568px)
  and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71)
  {
    font-size: 14px;
    line-height: 30px;
  }
  @media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (-webkit-min-device-pixel-ratio: 3) {
    font-size: 14px;
    line-height: 30px;
  }
  a:hover{
    transition: 0.5s;
  }
  button{
    margin-top: 50px;
    height: 100px;
    width: 300px;
    background-color: rgba(255, 89, 88, 0.75);
    color: #FFFFFF;
    font-size: 40px;
    border: none;
    @media only screen and (max-width: 720px) {
      font-size: 14px;
      height: 40px;
      width: 130px;
    }
    @media only screen and (min-device-width: 320px) and (max-device-width: 568px)
    and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71)
    {
      font-size: 14px;
      height: 40px;
      width: 130px;
    }
    @media only screen
    and (min-device-width: 414px)
    and (max-device-width: 736px)
    and (-webkit-min-device-pixel-ratio: 3) {
      font-size: 14px;
      height: 40px;
      width: 130px;
    }
  }
  button:hover{
      background-color: rgba(255, 89, 88, 1);
      transition: 0.5s;
  }
}
.hidden{
  visibility: hidden;
}

#button {
  width: 200px;
  height: 200px;
  background: red;
}

JS：

    function showOverlayFunction(){
    console.log('hello');
    $('.OVERLAY').removeClass('hidden')
}

function hideOverlayFunction(){
    $('.OVERLAY').addClass('hidden');
}

在我的网站上，我有几乎完全相同的设置，我的问题是，当我点击叠加显示的div时，然后当我按下“返回”按钮时，它确实这样做但按钮本身被延迟并停留有一秒钟，尝试了一些事件传播的东西，但似乎没有帮助，任何想法？

Answer 1

在您的css代码中，请更改为：

button:hover{
      background-color: rgba(255, 89, 88, 1);
      transition: 0;
}

隐藏叠加按钮延迟

1 个答案: