Fatal编程技术网
  • javascript/
  • Javascript 悬停2秒时显示下拉菜单 P> >考虑下面的代码。当我们悬停在按钮上时，下拉立即显示，没有任何延迟。如果有的话，我们可以推迟下拉菜单的出现，因为我们希望避免菜单上的意外悬停。

Javascript 悬停2秒时显示下拉菜单 P> >考虑下面的代码。当我们悬停在按钮上时，下拉立即显示，没有任何延迟。如果有的话，我们可以推迟下拉菜单的出现，因为我们希望避免菜单上的意外悬停。

javascript jquery html css drop-down-menu

Javascript 悬停2秒时显示下拉菜单 P> >考虑下面的代码。当我们悬停在按钮上时，下拉立即显示，没有任何延迟。如果有的话，我们可以推迟下拉菜单的出现，因为我们希望避免菜单上的意外悬停。,javascript,jquery,html,css,drop-down-menu,Javascript,Jquery,Html,Css,Drop Down Menu,.dropbtn{ 背景色：#4CAF50； 颜色：白色； 填充：16px； 字体大小：16px； 边界：无； 光标：指针； } .下拉列表{ 位置：相对位置； 显示：内联块； } .下拉内容{ 显示：无； 位置：绝对位置； 背景色：#f9f9f9； 最小宽度：160px； 盒影：0px 8px 16px 0px rgba（0,0,0,0.2）； } .下拉内容a{ 颜色：黑色； 填充：12px 16px； 文字装饰：无； 显示：块； } .下拉内容a:悬停{背景色：#f1f1} .下拉：悬停.


.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉内容a:悬停{背景色：#f1f1}
.下拉：悬停.下拉内容{
显示：块；
}
.dropdown:悬停.dropbtn{
背景色：#3e8e41；
}
下拉列表
简单的纯CSS解决方案：

使用
opacity
而不是
display
，并将
转换延迟设置为
2s




.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
不透明度：0；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉内容a:悬停{背景色：#f1f1}
.下拉：悬停.下拉内容{
不透明度：1；
过渡：不透明度；
过渡延迟：2s；
}
.dropdown:悬停.dropbtn{
背景色：#3e8e41；
}
下拉列表


.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉内容a:悬停{背景色：#f1f1}
.dropdown:悬停.dropbtn{
背景色：#3e8e41；
}
$（函数（）{
//使用“.dropbtn”类在html元素上创建悬停事件
$（“.dropbtn”）.hover（函数（）{
/* 
显示类为“.dropdown content”的html元素
2000毫秒（2秒）后
*/
$（“.dropdown content”）.show（2000年）；
},
函数（）{
$（“.dropdown content”）.hover（函数（）{
//显示此（当前）html元素
$（this.show（）；
}，函数（）{
/*
在1000毫秒后隐藏此（当前）html元素
（1秒）
*/
$（此）.hide（1000）；
});
});
});
下拉列表
整版

您可以在css中使用transition，也可以通过jquery/javascript超时函数来实现。使用css可能有点困难，而使用jquery可以更好地解决问题

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>

<!-- importing jquery cdn -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script>
  $(function(){

      // creating hover event on html element with ".dropbtn" class

     $(".dropbtn").hover(function(){

      /* 
         show the html element with class ".dropdown-content" 
         after 2000 millisecond(2 second) 
       */

                     $(".dropdown-content").show(2000);
              },
                 function(){
             $(".dropdown-content").hover(function(){

            // show this(current) html element

                     $(this).show();
              },function(){
          /*
            hide  this(current) html element after 1000 millisecond
           (1second)
         */

                     $(this).hide(1000);
                });
           });
    });
</script>
</head>
<body>



<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

</body>
</html>

Full page