gpt4 book ai didi

javascript - 隐藏覆盖按钮延迟

转载 作者:行者123 更新时间:2023-11-28 01:44:00 25 4
gpt4 key购买 nike

我有这个小问题,所以这是 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”按钮时,它确实这样做了,但按钮本身被延迟并停留等一下,尝试了一些事件传播的方法,但似乎没有帮助,有什么想法吗?

最佳答案

在您的 CSS 代码中,更改为:

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

关于javascript - 隐藏覆盖按钮延迟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50278494/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com