HTML:
<div id="slick-slidetoggle">wxyz</div>
<div id="slickbox" >abcd</div>
JS
// 一旦 DOM 准备好就隐藏 slickbox(页面加载稍早一点)
var hoverVariable=false;
var hoverVariable2=false;
$('#slickbox').hide();
$('#slick-slidetoggle').mouseover(function() {
hoverVariable2=true;
$('#slickbox').slideToggle(600);
return false;
})
$('#slick-slidetoggle').mouseleave(function() {
hoverVariable2=false;
setTimeout(function (){
if(!hoverVariable && !hoverVariable2){
$('#slickbox').slideToggle(600);
return false;}
}, 1000);
})
$('#slickbox').mouseleave(function() {
hoverVariable=false;
setTimeout(function (){
if(!hoverVariable && !hoverVariable2){
$('#slickbox').slideToggle(600);
return false;}
return false;
}, 1000);
})
$('#slickbox').mouseover(function() {
hoverVariable2=false;
hoverVariable=true;
})
CSS
#slickbox {
background: black;
width:100px;
height: 135px;
display: none;
cursor:pointer;
color:white;
}
#slick-slidetoggle{
background: yellow;
width:100px;
height: 135px;
cursor:pointer;
color:black;
}
</p>
现在上面的功能是我想要使用纯 CSS 实现的,即当我将鼠标悬停在“wxyz”按钮上时,“abcd”按钮应该下降并保持可见,即使鼠标从“wxyz”移开 3 秒。
我尝试了使用显示属性的转换延迟,但显然这不适用于显示属性,然后我尝试了位置:绝对和可见性以及可见性的转换延迟,但是按钮的出现延迟了 3 秒而不是隐藏。我希望“abcd”按钮在仅使用 CSS 或 CSS3 将按钮从“wxyz”移开 3 秒后隐藏