Задержка скрытой кнопки наложения

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, который показывает оверлей, но затем, когда я нажимаю кнопку «RETURN», это действительно так, но сама кнопка задерживается и остается там в течение секунды,пробовал несколько вещей с распространением событий, но, похоже, не помогло, есть идеи?

Answer 1

В вашем коде CSS измените на:

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