📌  相关文章
📜  如何在Bootstrap中的悬停上打开下拉菜单？

📅  最后修改于: 2021-05-25 16:20:00             🧑  作者: Mango

这是在Bootstrap中悬停时打开下拉菜单的任务。鼠标悬停的下拉列表可以使用以下方法完成。

  1. 使用jQuery hover()方法：它用于指定两个函数，当鼠标指针移到所选元素上时要启动。

    句法： 

    $(selector).hover(Function_in, Function_out);

    方法：

    • .hover()方法用于解决mouseenter事件的发生
    • 使用.children()方法存储所选元素的所有直接子级。
    • 使用.is(“：visible”)方法检查元素是否可见。
    • 使用.toggleClass(“ open”)方法显示元素。

    例子 ： 

    

  

    
    How to open dropdown menu 
      on hover in Bootstrap
  
    
    
    
  
    

  

    
    
        
    
  
            
     
            GeeksforGeeks 
        
    
            
    
            How to open dropdown menu on hover in Bootstrap
        
    
            
    
                
                
                
    
            
    
        
    
        
    
    

  

    输出：
    在将鼠标移到下拉菜单之前：

    将鼠标移至下拉菜单后：

  2. 使用CSS属性
    程序中使用的代码段 
    .dropdown:hover .dropdown-menu {
  display: block;
}

    例子： 

    

  

    How to open dropdown 
      menu on hover in Bootstrap
    
    
    
    

  

    
    
        
    
            
    
              GeeksforGeeks 
             
    
            
    How to open dropdown menu on hover in Bootstrap
             
    
            
    
                
            
    
        
    
    
    

  

    输出：
    在将鼠标移到下拉菜单之前：

    将鼠标移至下拉菜单后：