Javascript 延迟关闭css菜单上的子菜单（专用于DIV）_Javascript_Jquery_Html_Css

Javascript 延迟关闭css菜单上的子菜单（专用于DIV）

javascript jquery html css

Javascript 延迟关闭css菜单上的子菜单（专用于DIV）,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我已经用div制作了这个水平菜单（根本没有使用ul和li列表），我正在寻找一种方法来延迟鼠标离开时子菜单的关闭，不介意是使用javascript、jquery还是CSS。我尝试了一些javascript解决方案，但没有一个奏效 CSS .topmenu { margin: 0 auto; width: auto;float:left; position:relative; z-index:4; height: 50px; font-family: Arial, Helvetica, sans

我已经用div制作了这个水平菜单（根本没有使用ul和li列表），我正在寻找一种方法来延迟鼠标离开时子菜单的关闭，不介意是使用javascript、jquery还是CSS。我尝试了一些javascript解决方案，但没有一个奏效

CSS

.topmenu
{
margin: 0 auto; width: auto;float:left; 
position:relative;
z-index:4;
height: 50px;
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
color:#444;
}

.topmenu a
{
padding:0 16px;
line-height:50px; /*Note: keep this value the same as the height of .topmenu */
font-size:16px;
font-weight:normal;
display:block;
outline:0;
text-decoration: none;
position:relative;
color:#444;
}

 .topmenu .home, .topmenu .button1, .topmenu .button2 {float: left;}
 .topmenu .home img {vertical-align: top; margin-top:8px; border:none;}
 .topmenu .home:hover a, .topmenu .button1:hover a, .topmenu .button2:hover a
  {background-color:#333; color:#FFF; z-index:9;}



 .topmenu .subhome,
 .topmenu .submenu1,
 .topmenu .submenu2
 {
position: absolute;
right:0;
z-index:20;
display:none;
background-color:#0e5079;           
text-align: left;
padding: 20px;  
top:50px;
color:#999;
border-radius:3px;
-moz-box-shadow:1px 2px 12px #333333;
-webkit-box-shadow:1px 2px 12px #333333;
box-shadow:1px 2px 12px #333333;
text-shadow:
-1px -1px 0 #333,0px -1px 0 #333,1px -1px 0 #333,-1px 1px 0 #333,0px 1px 0 #333,1px 1px 0 #333;
 }
.topmenu .home:hover .subhome {display:block;}
.topmenu .button1:hover .submenu1 {display:block;}
.topmenu .button2:hover .submenu2 {display:block;}

.topmenu .subhome {
width:960px;
height:560px;
background-image:url(menu/menu-bg/corfu-bw-bg.jpg);
background-repeat:no-repeat;
background-position:center;     
  }
.topmenu .submenu1 {
background-image:url(menu/menu-bg/benitses-bg.jpg);
background-repeat:no-repeat;
background-position:center;     
}
.topmenu .submenu2 {
background-image:url(menu/menu-bg/corfu-bg.jpg);
background-repeat:no-repeat;
background-position:center;     
}
.topmenu .submenuleft {padding:20px;float:left;}
.topmenu .submenuleft span {font-weight:bold; font-size:16px;color:#DDD;line-  height:32px;}
.topmenu .submenuleft a span {font-weight:bold; font-size:16px;color:#FA0;padding-   top:5px;padding-bottom:8px;}
.topmenu .submenuleft a span:hover {color:#FF0; text-decoration:none;}
.topmenu .submenuleft a:hover {color:#FF0;font-size:14px;text-decoration:none;background:none;}
.topmenu .submenuleft img {display:block;border:#FFF 2px solid;padding:4px;margin-top:5px;}

.topmenu .subhome .submenuleft a,
.topmenu .submenu1 .submenuleft a,
.topmenu .submenu2 .submenuleft a
{
padding:0px;
line-height:26px;
font-size:14px;
background:none;
display: inline;
text-align:left;    
z-index: 0;
}

还有HTML

     <div class="topmenu">
<div class="home"><a href="#">HOME</a>
     <div class="subhome">
     </div> 
</div>
<div class="button1"><a href="#">ITEM1</a>
    <div class="submenu1" style="width:840px;">
        <div class="submenuleft">
                <a href="#"><span>LINK TITLE</span></a><br> 
                <a href="#">Example link</a><br>
                <a href="#">Example link</a><br>
                <a href="#">Example link</a><br>
                <a href="#">Example link</a>
        </div>
        <div class="submenuleft">
                <a href="#"><span>LINK TITLE</span></a><br> 
                <a href="#">Example link</a><br>
                <a href="#">Example link</a>
        </div>
        <div class="submenuleft">
                <a href="#"><span>LINK TITLE</span></a><br> 
                <a href="#">Example link</a><br>
                <a href="#">Example link</a><br>
                <a href="#">Example link</a><br>
                <a href="#">Example link</a><br>
                <a href="#">Example link</a>
        </div>
        <div class="submenuleft" style="text-align:right;width:130px;">
            <img src="menu/benitses-m.jpg" alt="" style="width:128px; height:200px; height:190px;margin-top:5px;">
        </div>            
    </div>
</div>

<div class="button2"><a href="#">ITEM2</a>
     <div class="submenu2" style="width:800px;">
       <div class="submenuleft">
                 <a href="#"><span>LINK TITLE</span></a><br> 
                 <a href="#">Example link</a><br>
                 <a href="#">Example link</a><br>   
                 <a href="#">Example link</a>                  
        </div>
        <div class="submenuleft">
                 <a href="#"><span>LINK TITLE</span></a><br>                  
                 <a href="#"><span>LINK TITLE</span></a><br> 
                 <a href="#">Example link</a><br>
                 <a href="#">Example link</a>                  
        </div>
        <div class="submenuleft">
                  <a href="#">Example link</a><br>
                  <a href="#">Example link</a><br>
                  <a href="#">Example link</a>                   
        </div>
        <div class="submenuleft" style="text-align:right; width:140px;">
            <img src="menu/mouse-island.jpg" alt="" style="width:140px; height:210px;">
        </div>
     </div>
</div>

您可以看到此菜单的测试示例[此处][1]

多谢各位

[1] ：

您不能仅使用CSS延迟隐藏元素（使用：hover）。浏览器会立即呈现新状态。您需要一些JavaScript和

setTimeout

magic来实现这一点

下面的代码就是一个简单的例子。我在这里使用jQuery是因为它很紧凑，并且提供了一些有用的东西，比如

mouseleave

事件

我在每个按钮

div

中添加了一个class

按钮
<div class="button1 button"><a href="#">ITEM1</a>

$('.button').each(function() {

  // We use closures here so that each button has it's own 'to'.
  var $that = $(this)
      ,to;

  $that.on('mouseleave', function() {

    // We wait 500 ms using setTimeout
    to = setTimeout(function() { 
      $that.find('> div').hide(); 
    }, 500);
  });

  $that.on('mouseenter', function() {

    // Hide all other open submenu's that are potentially open.
    $('.button > div').hide(); 

    // I use a show here, but you could also keep using your CSS :hover technique. 
    // In that case remove this show call. 
    $that.show();
  });


$（'.button'）。每个（函数（）{
//我们在这里使用闭包，这样每个按钮都有自己的“to”。
var$that=$（此）
到
$that.on（'mouseleave'，function（）{
//我们使用setTimeout等待500毫秒
to=设置超时（函数（）{
$that.find（'>div'）.hide（）；
}, 500);
});
$that.on（'mouseenter'，function（）{
//隐藏所有其他可能打开的打开子菜单。
$（'.button>div'）.hide（）；
//我在这里使用了一个show，但您也可以继续使用CSS:hover技术。
//在这种情况下，请删除此显示呼叫。
$that.show（）；
});
您可以使用CSS转换。只需使用可见性
属性来显示和隐藏菜单（而不是在块
和无
之间切换显示
），指定转换，您将延迟从可见
到隐藏
的更改，而不是相反
显然，您还可以创建淡入效果，设置不透明度
属性的动画
实例：
示例代码：
<ul id="menu">
    <li>
        <a href="">Text</a>
        <ul>
            <li><a href="">A</a></li>
            <li><a href="">B</a></li>
            <li><a href="">C</a></li>
            <li><a href="">D</a></li>
            <li><a href="">E</a></li>
        </ul>
    </li>
</ul>

代码有3个主要按钮（可以扩展到任何数字）可以像这样，包括图片和背景图像等
HTML
使用此技术，当用户将鼠标悬停在子菜单外时，子菜单的隐藏将立即开始。如果可以接受，则这是一个很好的解决方案。@koenp我不明白，应该在何时开始？这取决于您希望效果如何发生。如果我没有错误地使用此技术，子菜单将在2秒钟内淡出。如果您不想淡出，而是想在用户用鼠标离开子菜单2秒后立即消失，则此操作不起作用。@koenp不，它不会淡出（但可以），它会立即消失。您是否尝试过实时演示？您使用的是哪种浏览器？好的，我尝试过，它按照我的喜好工作，但它又产生了另一个问题。
#menu ul{
    visibility: hidden;
    position: absolute;
    padding: 0;
    -moz-transition-property: visibility;
    -moz-transition-duration: 2s;
    -webkit-transition-property: visibility;
    -webkit-transition-duration: 2s;
    transition-property: visibility;
    transition-duration: 2s;
}

#menu li:hover > ul{
    visibility: visible;
}

 <div class="topmenu">
<div class="home"><a href="#">HOME</a>
     <div class="subhome">
     </div> 
</div>
<div class="button1 sub"><a href="#">ITEM1</a>
    <div class="submenu1" style="width:840px;">
        <div class="submenuleft">
                <a href="#"><span>LINK TITLE</span></a><br> 
                <a href="#">Example link</a><br>
                <a href="#">Example link</a><br>
                <a href="#">Example link</a><br>
                <a href="#">Example link</a>
        </div>
        <div class="submenuleft">
                <a href="#"><span>LINK TITLE</span></a><br> 
                <a href="#">Example link</a><br>
                <a href="#">Example link</a>
        </div>
        <div class="submenuleft">
                <a href="#"><span>LINK TITLE</span></a><br> 
                <a href="#">Example link</a><br>
                <a href="#">Example link</a><br>
                <a href="#">Example link</a><br>
                <a href="#">Example link</a><br>
                <a href="#">Example link</a>
        </div>
        <div class="submenuleft" style="text-align:right;width:130px;">
            <img src="" alt="" style="width:128px; height:200px; height:190px;margin-top:5px;">
        </div>            
    </div>
</div>

<div class="button2"><a href="#">ITEM2</a>
     <div class="submenu2" style="width:800px;">
       <div class="submenuleft">
                 <a href="#"><span>LINK TITLE</span></a><br> 
                 <a href="#">Example link</a><br>
                 <a href="#">Example link</a><br>   
                 <a href="#">Example link</a>                  
        </div>
        <div class="submenuleft">
                 <a href="#"><span>LINK TITLE</span></a><br>                  
                 <a href="#"><span>LINK TITLE</span></a><br> 
                 <a href="#">Example link</a><br>
                 <a href="#">Example link</a>                  
        </div>
        <div class="submenuleft">
                  <a href="#">Example link</a><br>
                  <a href="#">Example link</a><br>
                  <a href="#">Example link</a>                   
        </div>
        <div class="submenuleft" style="text-align:right; width:140px;">
            <img src="" alt="" style="width:140px; height:210px;">
        </div>
     </div>
</div>

      .home .topmenu .home a,
      .button1 .topmenu .button1 a,
      .button2 .topmenu .button2 a { 
      color:#FFF;  
      background-color:#a4472d;
 }
.topmenu
{
      margin: 0 auto; width: auto;float:left; 
      position:relative;
      z-index:20;
      height: 50px;
      font-family: Arial, Helvetica, sans-serif;
  font-size:16px;
  color:#444;
    }

     .topmenu a
 {
     padding:0 16px;
     line-height:50px; /*Note: keep this value the same as the height of .topmenu */
     font-size:16px;
     font-weight:normal;
     display:block;
     outline:0;
     text-decoration: none;
     position:relative;
 color:#444;
 }

     .topmenu .home, .topmenu .button1, .topmenu .button2 {float: left;}
     .topmenu .home img {vertical-align: top; margin-top:8px; border:none;}
     .topmenu .home:hover a, .topmenu .button1:hover a, .topmenu .button2:hover a  {background-color:#333; color:#FFF; z-index:9;}



     .topmenu .subhome,
     .topmenu .submenu1,
     .topmenu .submenu2
{
    position: absolute;
right:0;
    z-index:20;
visibility:hidden; 
opacity:0;        **/* use both visibility and opacity */**
    background-color:#0e5079;           
    text-align: left;
    padding: 20px;  
    top:50px;
color:#999;
border-radius:3px;
-moz-box-shadow:1px 2px 12px #333333;
-webkit-box-shadow:1px 2px 12px #333333;
box-shadow:1px 2px 12px #333333;
text-shadow:
-1px -1px 0 #333,0px -1px 0 #333,1px -1px 0 #333,-1px 1px 0 #333,0px 1px 0 #333,1px 1px 0 #333;

    -moz-transition-property: visibility, opacity;
    -moz-transition-duration: 2s;
    -webkit-transition-property: visibility, opacity;
    -webkit-transition-duration: 2s;
    transition-property: visibility, opacity;
    transition-duration: 2s;   **/* some changes on transition */**

   }
   .topmenu .home:hover .subhome {visibility:visible; opacity:1; z-index:150;}
   .topmenu .button1:hover .submenu1 {visibility:visible; opacity:1; z-index:150;}
   .topmenu .button2:hover .submenu2 {visibility:visible; opacity:1; z-index:150;  **/* the rise of z-index during topbuttons hover is important */**}


.topmenu .subhome {
width:960px;
height:560px;
background-image:url(example.jpg);
background-repeat:no-repeat;
background-position:center;     
}
    .topmenu .submenu1 {
background-image:url(example2.jpg);
background-repeat:no-repeat;
background-position:center;     
}
    .topmenu .submenu2 {
background-image:url(example3.jpg);
background-repeat:no-repeat;
background-position:center;     
}
    .topmenu .submenuleft {padding:20px;float:left;}
    .topmenu .submenuleft span {font-weight:bold; font-size:16px;color:#DDD;line-height:32px;}
    .topmenu .submenuleft a span {font-weight:bold; font-size:16px;color:#FA0;padding-top:5px;padding-bottom:8px;}
    .topmenu .submenuleft a span:hover {color:#FF0; text-decoration:none;}
    .topmenu .submenuleft a:hover {color:#FF0;font-size:14px;text-decoration:none;background:none;}
    .topmenu .submenuleft img {display:block;border:#FFF 2px solid;padding:4px;margin-top:5px;}

    .topmenu .subhome .submenuleft a,
    .topmenu .submenu1 .submenuleft a,
    .topmenu .submenu2 .submenuleft a
{
    padding:0px;
    line-height:26px;
    font-size:14px;
background:none;
    display: inline;
    text-align:left;    
    z-index: 0;
color:#FFF;
}