javascript - jQuery multi level selector for hover event -


i have multi level menu structured this:

 <div id="outer_div">         <div id="menu_liv0" class="menu">         <ul>             <li><a href="#" data-id="125" data-liv="0">text</a></li>             <li><a href="#" data-id="184" data-liv="0">text</a></li>             <li><a href="#" data-id="240" data-liv="0">text</a></li>         </ul>     </div>     <div id="menu_liv1" class="menu">         <ul>             <li><a href="#" data-id="430" data-liv="1">text</a></li>             <li><a href="#" data-id="307" data-liv="1">text</a></li>             <li><a href="#" data-id="652" data-liv="1">text</a></li>         </ul>     </div>     <div id="menu_liv2" class="menu">         <ul>             <li><a href="#" data-id="410" data-liv="2">text</a></li>             <li><a href="#" data-id="174" data-liv="2">text</a></li>             <li><a href="#" data-id="921" data-liv="2">text</a></li>         </ul>     </div> </div> 

i'd use jquery handle hover event of li (or a) display second level of menu can't figure out how it. tried both way , children("li").children("a") method without success.

$("#menu_liv0 > ul > li").on("mouseenter", function(){     //function populates second level of menu goes here     $("#menu_liv1").css("display", "block");             }); $("#menu_liv0 > ul > li").on("mouseleave", function(){     $("#menu_liv1").css("display", "none"); }); 

make "on" "live". had done small example,please https://jsbin.com/yeliqoroje/edit?html,js,output


Comments

Popular posts from this blog

Ansible - ERROR! the field 'hosts' is required but was not set -

customize file_field button ruby on rails -

SoapUI on windows 10 - high DPI/4K scaling issue -