Как скрыть элементы списка при перемещении мыши из текущего элемента?

В этой программе элемент подменю не скрывается, когда мышь перемещается к другим элементам, я хочу скрыть элементы подменю, когда мышь перемещается из их области. Вы можете мне помочь? Я действительно хочу выпадающий список меню по щелчку.Как скрыть элементы списка при перемещении мыши из текущего элемента?

#main li{ 
 
     list-style-type: none; 
 
     display: none; 
 
     text-decoration: none; 
 
    } 
 
    #main{ 
 
     cursor: pointer; 
 
     
 
    } 
 
    #pappaya { 
 
     background-color:#339933; 
 
     text-decoration: none; 
 
    } 
 
    #pappayas { 
 
      background-color:#339933; 
 
      text-decoration: none; 
 
     } 
 
    .orang{ 
 
     text-decoration: none; 
 
    } 
 
    #pappaya li{ 
 
     text-decoration: none; 
 
    }

<html> 
 
     <head> 
 
      <link rel="stylesheet" type="text/css" href="mango.css"> 
 
      <script> 
 
       function mangoGrape(selector){ 
 
       document.querySelectorAll(selector) 
 
        .forEach(function(node){ 
 
         node.style.display="block"; 
 
        }) 
 
       } 
 
      </script> 
 
     </head> 
 
     <body> 
 
     </body> 
 
     <ul id="main" onclick="mangoGrape('.apple')">main1 
 
      <div id="pappaya"> 
 
      <li class="apple"> <a href="#">sub1</a></li> 
 
      <li class="apple"><a href="#">sub2</a></li> 
 
      <li class="apple"><a href="#">sub3</a></li> 
 
      </div> 
 
     </ul> 
 
     <ul id="main" onclick="mangoGrape('.orang')">main2 
 
      <div id="pappayas"> 
 
      <a href="#"><li class="orang">sub21</li></a> 
 
      <a href="#"><li class="orang">sub22</li></a> 
 
      <a href="#"><li class="orang">sub23</li></a> 
 
      </div> 
 
     </ul> 
 
    </html>

В этой программе пункт подменю являются не скрывает, когда перемещение мыши на другие элементы, я хочу, чтобы скрыть пункты меню к югу при перемещении мыши из их области .one другой проблемы связанный с этим кодом, свойство украшения текста не работает должным образом.

источник

2016-08-17 Dream Hunter

http://stackoverflow.com/questions/10995165/css-opposite-of- hover-on-mouse-leave –

Вы хотите показать суб-список только на ** клике ** или это нормально, когда мышь m oved над пунктом меню. – Pugazh

Посмотрите этот пример - http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar – Pugazh

Вы просто забыли скрывается еще один пункт:

/*Do not show li when page showed/ li { display: none; }*/ 
 

 

 
#main li{ 
 
    list-style-type: none; 
 
    display: none; 
 
    text-decoration: none; 
 
} 
 
#main{ 
 
    cursor: pointer; 
 

 
} 
 
#pappaya { 
 
    background-color:#339933; 
 
    text-decoration: none; 
 
} 
 
#pappayas { 
 
     background-color:#339933; 
 
     text-decoration: none; 
 
    } 
 
.orang{ 
 
    text-decoration: none; 
 
} 
 
#pappaya li{ 
 
    text-decoration: none; 
 
}

<html> 
 
    <head> 
 
     <link rel="stylesheet" type="text/css" href="mango.css"> 
 
     <script> 
 
      function mangoGrape(selector){ 
 
       // hide all lis first 
 
       document.querySelectorAll('li') 
 
        .forEach(function(node){ 
 
         node.style.display="none"; 
 
        }) 
 
       // then show what you want 
 
       document.querySelectorAll(selector) 
 
        .forEach(function(node){ 
 
         node.style.display="block"; 
 
        }) 
 
      } 
 
     </script> 
 
    </head> 
 
    <body> 
 
     <ul id="main" onclick="mangoGrape('.apple')">main1 
 
      <div id="pappaya"> 
 
      <li class="apple"> <a href="#">sub1</a></li> 
 
      <li class="apple"><a href="#">sub2</a></li> 
 
      <li class="apple"><a href="#">sub3</a></li> 
 
      </div> 
 
     </ul> 
 
     <ul id="main" onclick="mangoGrape('.orang')">main2 
 
      <div id="pappayas"> 
 
      <a href="#"><li class="orang">sub21</li></a> 
 
      <a href="#"><li class="orang">sub22</li></a> 
 
      <a href="#"><li class="orang">sub23</li></a> 
 
      </div> 
 
     </ul> 
 
    </body> 
 
</html>

источник

2016-08-17 09:52:55 CoderLim

, это хорошее решение, но оно всегда показывало некоторые элементы подменю, даже если мы нажмем на вне его будет показано that.i хотите выпадающее меню при щелчке. –

Я точно не понимаю, чего вы хотите. – CoderLim

Мне действительно нужно выпадающее меню при щелчке. –

Событие onmouseout происходит, когда указатель мыши перемещается из элемента или из одного из его дочерних элементов.

<html> 
 
    <head> 
 
     <link rel="stylesheet" type="text/css" href="mango.css"> 
 
     <script> 
 
      function mangoGrape(selector){ 
 
      document.querySelectorAll(selector) 
 
       .forEach(function(node){ 
 
        node.style.display="block"; 
 
       }) 
 
      } 
 
      function hide(selector){ 
 
      document.querySelectorAll(selector) 
 
       .forEach(function(node){ 
 
        node.style.display="none"; 
 
       }) 
 
      } 
 
     </script> 
 
    </head> 
 
    <body> 
 
    </body> 
 
    <ul id="main" onmouseout="hide('#pappaya')" onclick="mangoGrape('.apple')">main1 
 
     <div id="pappaya"> 
 
     <li class="apple"> <a href="#">sub1</a></li> 
 
     <li class="apple"><a href="#">sub2</a></li> 
 
     <li class="apple"><a href="#">sub3</a></li> 
 
     </div> 
 
    </ul> 
 
    <ul id="main" onmouseout="hide('#pappayas')" onclick="mangoGrape('.orang')">main2 
 
     <div id="pappayas"> 
 
     <a href="#"><li class="orang">sub21</li></a> 
 
     <a href="#"><li class="orang">sub22</li></a> 
 
     <a href="#"><li class="orang">sub23</li></a> 
 
     </div> 
 
    </ul> 
 
</html>

источник

2016-08-17 09:41:55

это хорошо. Но я не могу выбрать элемент подменю при использовании этого кода, действительно, я хочу выпадающее меню при нажатии –

Как скрыть элементы списка при перемещении мыши из текущего элемента?

ответ

Смежные вопросы