change onclick event into mousehover

Question

how to change the below script to onhover instead of onclick

 $(function(){

        //Drawer Subnavigation Accordion
        $('#DrawerMenu li ul').addClass('drawer-subcat');
        

        $("#DrawerMenu .side-menu > ul.sf-menu > li > .drawer-subcat").prev('a').attr("href", "javascript:void(0)");

        $('#DrawerMenu .drawer-subcat').prev('a').addClass('has-sub');
        
        $('#DrawerMenu .drawer-subcat').prev('a').after('<span class="subcat-expand"></span>');

        $('#DrawerMenu li > a.has-sub').on('hover', function(){
            $(this).parent().toggleClass('active');
            $(this).next('.drawer-subcat').toggleClass('expanded');
            $(this).parent().toggleClass('subcat-expanded');           
        });
        $('#DrawerMenu .subcat-expand').on('hover', function(){
            $(this).parent().toggleClass('active');
            $(this).next('.drawer-subcat').toggleClass('expanded');
            $(this).toggleClass('subcat-expanded');
           
        });
    });

#DrawerMenu.on-screen {
  background: #1a1a1a none repeat scroll 0 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  left: 0 !important;
  position: fixed !important;
  right: 0 !important;
  top: 0 !important;
  width: 66% !important;
  z-index: 2147483647 !important;
  margin-top: 41px !important;
  overflow-y: visible !important;
}
#DrawerMenu{display:block}
#Header,.page{-webkit-transition:-webkit-transform 100ms ease-out;-ms-transition:-ms-transform 100ms ease-out;transition:transform 100ms ease-out}
/*.page.off-screen{-webkit-transform:translateX(250px); -ms-transform:translateX(250px);transform:translateX(250px);position:fixed;overflow-y:hidden;width:100%}*/
#DrawerMenu{position:absolute;bottom:0;top:0;z-index:0;width:250px;background-color:#292929;color:#fff}
#DrawerMenu ul.sf-menu>li>ul{background-color:#373737}
#DrawerMenu ul.sf-menu>li>ul ul{background-color:#404040}
#DrawerMenu.on-screen{display:block;position:absolute;overflow-y:auto}
#DrawerMenu div{margin:0}
#DrawerMenu h3{background:#666;color:#fff;font-size:.8em;font-weight:normal;padding:10px 15px;text-transform:uppercase;display:none}
#DrawerMenu ul{list-style:none;margin:0}
#DrawerMenu li{float:none;border-bottom:1px solid #3c3c3c;list-style:none outside none}
#DrawerMenu a{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:block;color:#fff;font-size:1.1em;font-weight:normal;padding:13px 15px 13px;font:700 14px "Roboto Condensed";text-transform:uppercase}
#DrawerMenu a:hover{text-decoration:none;color:#4e89ff}
#DrawerMenu li>div{padding:0 15px}
#DrawerMenu li>div>a{margin:0 -15px}
#DrawerMenu li li a{font:400 12px Roboto;padding:13px 15px;text-transform:none;color:#fff}
#DrawerMenu li li li a{padding-left:30px;color:#b9b9b9}
#DrawerMenu .sf-menu>li>ul>li>a{font-weight:700}
#DrawerMenu .subcat-expand{position:absolute;right:0;top:0;height:40px;width:45px;line-height:45px;text-align:center;margin-top:0!important;}
#DrawerMenu .subcat-expand:hover{cursor:pointer}
#DrawerMenu .sf-menu>li>.subcat-expand:after{display:block;font-family:"FontAwesome";content:"\f0da";font-size:16px;background:0;top:auto;left:auto;width:auto;height:auto;transform:none;-webkit-transform:none}
#DrawerMenu .sf-menu>li.active>.subcat-expand:after{content:"\f0d7"}
#DrawerMenu .subcat-expand:after{content:'';width:20px;height:20px;display:block;position:relative;top:50%;left:9px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:url(//cdn6.bigcommerce.com/s-oc1oaj0to2/templates/__custom/images/sprite-icons.png?t=1494648891) no-repeat -137px -42px}
#DrawerMenu .subcat-expand.subcat-expanded:after{background-position:-157px -45px}
#DrawerMenu .sf-menu li.active>a{color:#4e89ff}
#DrawerMenu .drawer-subcat{background:#444;display:block!important;max-height:0;overflow:hidden;left:auto;top:auto;position:relative;visibility:visible!important;width:100%}
#DrawerMenu .drawer-subcat.expanded,#DrawerMenu ul li.active>ul.drawer-subcat{border-top:1px solid #555;max-height:1000px}
#DrawerMenu li.HL-HasMegamenu.active>.Wrapper-Megamenu.drawer-subcat,#DrawerMenu li.HL-HasMegamenu.active>.Wrapper-Megamenu.drawer-subcat>li>.drawer-subcat{max-height:1000px;transition:none;-moz-transition:none;-webkit-transition:none;background:0}
#DrawerMenu li.HL-HasMegamenu.active .Wrapper-Megamenu.drawer-subcat .WrapperCategory,#DrawerMenu li.HL-HasMegamenu.active>.Wrapper-Megamenu .feature-brands{display:none}
#DrawerMenu li.HL-HasMegamenu.active>.Wrapper-Megamenu.drawer-subcat li div{padding:0;text-align:center;width:100%}
#DrawerMenu li.HL-HasMegamenu.active>.Wrapper-Megamenu.drawer-subcat li a{padding:0;margin:0;transition:none;-moz-transition:none;-webkit-transition:none}
#DrawerMenu li.HL-HasMegamenu.active>.Wrapper-Megamenu.drawer-subcat li .bottom_text{display:none}

<div id="DrawerMenu" class="">
       <div class="inner">
        <ul class="test"><li class="active"><a href="https://machinetoolproducts.com">Home</a></li></ul>
        <div class="CategoryList" id="SideCategoryList">
    <h3>Categories</h3>
    <div class="BlockContent">
        <div class="SideCategoryListFlyout side-menu">         
            <ul class="sf-menu sf-horizontal sf-js-enabled">
<li class="active"><a href="javascript:void(0)" class="has-sub sf-with-ul">Products<span class="sf-sub-indicator"> »</span></a><span class="subcat-expand"></span><ul class="drawer-subcat" style="display: none; visibility: hidden;">
<li class="active"><a href="https://machinetoolproducts.com/category/cnc-retrofit-kits/" class="has-sub sf-with-ul">CNC Retrofit Kits<span class="sf-sub-indicator"> »</span></a><span class="subcat-expand"></span><ul class="drawer-subcat" style="display: none; visibility: hidden;">
<li class="active"><a href="https://machinetoolproducts.com/category/milling-machine-cnc-retrofit-kits/" class="has-sub sf-with-ul">Milling Machine CNC Retrofit Kits<span class="sf-sub-indicator"> »</span></a><span class="subcat-expand"></span><ul class="drawer-subcat" style="display: none; visibility: hidden;">
<li class="active"><a href="https://machinetoolproducts.com/category/siemens-cnc-mill-retrofit-kits/">Siemens CNC Mill Retrofit Kits</a></li>

</ul>
</li>
<li class="active"><a href="https://machinetoolproducts.com/category/lathe-cnc-retrofit-kits/">Lathe CNC Retrofit Kits</a></li>

</ul>
</li>
<li class="active"><a href="https://machinetoolproducts.com/products/digital-readouts-dro/" class="has-sub sf-with-ul">Digital Readouts (DRO)<span class="sf-sub-indicator"> »</span></a><span class="subcat-expand"></span><ul class="drawer-subcat" style="display: none; visibility: hidden;">
<li class="active"><a href="https://machinetoolproducts.com/category/digital-readout-systems/" class="has-sub sf-with-ul">Digital Readout Systems<span class="sf-sub-indicator"> »</span></a><span class="subcat-expand"></span><ul class="drawer-subcat" style="display: none; visibility: hidden;">
<li class="active"><a href="https://machinetoolproducts.com/category/mill-digital-readout-kits/">Mill Digital Readout Kits</a></li>
<li class="active"><a href="https://machinetoolproducts.com/category/lathe-digital-readout-kits/">Lathe Digital Readout Kits</a></li>
<li class="active"><a href="https://machinetoolproducts.com/category/surface-grinder-digital-readout-kits/">Surface Grinder Digital Readout Kits</a></li>
<li class="active"><a href="https://machinetoolproducts.com/category/custom-digital-readout-packages/">Custom Digital Readout Packages</a></li>
<li class="active"><a href="https://machinetoolproducts.com/category/newall-dp500-digital-readout-kits/">Newall DP500 Digital Readout Kits</a></li>
<li class="active"><a href="https://machinetoolproducts.com/category/newall-dp700-digital-readout-kits/">Newall DP700 Digital Readout Kits</a></li>
<li class="active"><a href="https://machinetoolproducts.com/category/newall-dp1200-digital-readout-kits/">Newall DP1200 Digital Readout Kits</a></li>

</ul>
</li>
<li class="active"><a href="https://machinetoolproducts.com/category/digital-readout-displays/" class="has-sub sf-with-ul">Digital Readout Displays<span class="sf-sub-indicator"> »</span></a><span class="subcat-expand"></span><ul class="drawer-subcat" style="display: none; visibility: hidden;">
<li class="active"><a href="https://machinetoolproducts.com/category/newall-dp700-dro-displays/">Newall DP700 DRO Displays</a></li>
<li class="active"><a href="https://machinetoolproducts.com/category/newall-dp1200-dro-displays/">Newall DP1200 DRO Displays</a></li>

</ul>
</li>
<li class="active"><a href="https://machinetoolproducts.com/category/digital-readout-scales/" class="has-sub sf-with-ul">Digital Readout Scales<span class="sf-sub-indicator"> »</span></a><span class="subcat-expand"></span><ul class="drawer-subcat" style="display: none; visibility: hidden;">
<li class="active"><a href="https://machinetoolproducts.com/category/newall-digital-readout-scales/">Newall Digital Readout Scales</a></li>
<li class="active"><a href="https://machinetoolproducts.com/category/dro-glass-scale-replacements/">DRO Glass Scale Replacements</a></li>

</ul>
</li>
<li class="active"><a href="https://machinetoolproducts.com/category/digital-readout-parts-accessories/" class="has-sub sf-with-ul">Digital Readout Parts &amp; Accessories<span class="sf-sub-indicator"> »</span></a><span class="subcat-expand"></span><ul class="drawer-subcat" style="display: none; visibility: hidden;">
<li class="active"><a href="https://machinetoolproducts.com/category/newall-dro-repair-parts/">Newall DRO Repair Parts</a></li>
<li class="active"><a href="https://machinetoolproducts.com/category/newall-dro-options-accessories/">Newall DRO Options &amp; Accessories</a></li>
<li class="active"><a href="https://machinetoolproducts.com/category/glass-scale-replacement-scales/">Glass Scale Replacement Scales</a></li>

</ul>
</li>

</ul>
</li>
<li class="active"><a href="https://machinetoolproducts.com/category/drives-accessories/" class="has-sub sf-with-ul">Drives &amp; Accessories<span class="sf-sub-indicator"> »</span></a><span class="subcat-expand"></span><ul class="drawer-subcat" style="display: none; visibility: hidden;">
<li class="active"><a href="https://machinetoolproducts.com/category/3-phase-ac-drives/" class="has-sub sf-with-ul">3-Phase AC Drives<span class="sf-sub-indicator"> »</span></a><span class="subcat-expand"></span><ul class="drawer-subcat" style="display: none; visibility: hidden;">
<li class="active"><a href="https://machinetoolproducts.com/category/460vac-in-460vac-out-ac-drives/">460VAC IN, 460VAC OUT AC Drives</a></li>
<li class="active"><a href="https://machinetoolproducts.com/category/230vac-in-230vac-out-ac-drives/">230VAC IN, 230VAC OUT AC Drives</a></li>
<li class="active"><a href="https://machinetoolproducts.com/categories/ac-drive-accessories/">AC Drive Accessories</a></li>

</ul>
</li>
<li class="active"><a href="https://machinetoolproducts.com/categories/3-phase-dc-drives/" class="has-sub sf-with-ul">3-Phase DC Drives<span class="sf-sub-indicator"> »</span></a><span class="subcat-expand"></span><ul class="drawer-subcat" style="display: none; visibility: hidden;">
<li class="active"><a href="https://machinetoolproducts.com/categories/240v-arm-230vac-dc-drives/">240V arm, 230VAC DC Drives</a></li>
<li class="active"><a href="https://machinetoolproducts.com/categories/500v-arm-460vac-dc-drives/">500V arm, 460VAC DC Drives</a></li>
<li class="active"><a href="https://machinetoolproducts.com/categories/dc-drive-accessories/">DC Drive Accessories</a></li>

</ul>
</li>

</ul>
</li>
<li class="active"><a href="https://machinetoolproducts.com/category/linear-encoders-for-cnc-plc/" class="has-sub sf-with-ul">Linear Encoders for CNC/PLC<span class="sf-sub-indicator"> »</span></a><span class="subcat-expand"></span><ul class="drawer-subcat" style="display: none; visibility: hidden;">
<li class="active"><a href="https://machinetoolproducts.com/category/incremental-linear-feedback-encoders/">Incremental Linear Feedback Encoders</a></li>
<li class="active"><a href="https://machinetoolproducts.com/category/absolute-linear-feedback-encoders/">Absolute Linear Feedback Encoders</a></li>
<li class="active"><a href="https://machinetoolproducts.com/category/newall-lfe-extension-cables/">Newall LFE Extension Cables</a></li>
<li class="active"><a href="https://machinetoolproducts.com/category/newall-lfe-mounting-hardware/">Newall LFE Mounting Hardware</a></li>

</ul>
</li>
<li class="active"><a href="https://machinetoolproducts.com/category/motor-control-cable/" class="has-sub sf-with-ul">Motor &amp; Control Cable<span class="sf-sub-indicator"> »</span></a><span class="subcat-expand"></span><ul class="drawer-subcat" style="display: none; visibility: hidden;">
<li class="active"><a href="https://machinetoolproducts.com/category/high-flex-vfd-servo-cable/">High-Flex VFD &amp; Servo Cable</a></li>
<li class="active"><a href="https://machinetoolproducts.com/category/high-flex-control-cable/">High-Flex Control Cable</a></li>
<li class="active"><a href="https://machinetoolproducts.com/category/shielded-signal-cable/">Shielded Signal Cable</a></li>
<li class="active"><a href="https://machinetoolproducts.com/category/cable-accessories/">Cable Accessories</a></li>

</ul>
</li>
<li class="active"><a href="https://machinetoolproducts.com/categories/used-machinery/">Used Machinery</a></li>

</ul>
</li>

</ul>

        </div>
    </div>
</div>


           </div>
       </div>

this is showing my submenu on click in mobile mode I want to show submenu on hover. here is the website https://machinetoolproducts.com/ I have updated the question with html and css code but its not showing result properly . for refference please check website https://machinetoolproducts.com/

Change it to `.hover()` - https://api.jquery.com/hover/ - this is the first answer on google, did you search first? — StudioTime, May 15 '17 at 08:06
Possible duplicate of [Trigger onmouseover event programatically in JavaScript](http://stackoverflow.com/questions/2228376/trigger-onmouseover-event-programatically-in-javascript) — cнŝdk, May 15 '17 at 08:14
@Optimimae I have changed .click to .on('hover', function(e){ etc.... }); its work but when we remove the mouse the sub menu going to hide. also, it is not working on chrome. thanks for reply all just little remains. — R.K.Bhardwaj, May 15 '17 at 08:53

score 0 · Accepted Answer · answered May 15 '17 at 08:10

0

Simply use the mouseover event instead of click

$(function(){

    //Drawer Subnavigation Accordion
    $('#DrawerMenu li ul').addClass('drawer-subcat');

    $("#DrawerMenu .side-menu > ul.sf-menu > li > .drawer-subcat").prev('a').attr("href", "javascript:void(0)");

    $('#DrawerMenu .drawer-subcat').prev('a').addClass('has-sub');

    $('#DrawerMenu .drawer-subcat').prev('a').after('<span class="subcat-expand"></span>');

    $('#DrawerMenu li > a.has-sub').mouseover(function(){
        $(this).parent().toggleClass('active');
        $(this).next('.drawer-subcat').toggleClass('expanded');
        $(this).parent().toggleClass('subcat-expanded');           
    });
    $('#DrawerMenu .subcat-expand').mouseover(function(){
        $(this).parent().toggleClass('active');
        $(this).next('.drawer-subcat').toggleClass('expanded');
        $(this).toggleClass('subcat-expanded');

    });
});

Here is a snippet :

$( ".test" ).mouseover(function() {
  console.log("hover triggered");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">put mouse here</div>
<div class="test">or put mouse here</div>

answered May 15 '17 at 08:10

Bourbia Brahim

14,459
4
39
52

thanks for reply I have added your code now please check on firefox the hover class going to remove when we try to go submenus. – R.K.Bhardwaj May 15 '17 at 09:01
this is another issue ! do you have acces to edit custom.css ? – Bourbia Brahim May 15 '17 at 09:58
Yes sir I have but currently I have made all active when mouse hover on it, if you check then when mouse goes to exact name of the category then its hide the sub item and if mouse goes to icon something like + or carrot icon its showing drop down so I think its work something wrong way LOL! – R.K.Bhardwaj May 15 '17 at 11:52
could you post html and some css style , or just create another question and give the link – Bourbia Brahim May 15 '17 at 12:55
My main problem was that when someone clicks on the page outside anywhere the menu sidebar should be closed I have achieved this successfully but when you click any of menu or sub menus it's going to close sidebar, that's why I have thought about showing menu on hover instead of click. if its stop hiding sidebar on click to submenu then no need to show menus in hover. – R.K.Bhardwaj May 16 '17 at 04:25

score 0 · Answer 2 · answered May 15 '17 at 08:10

0

Simply change it to use .hover()

In your case it would be:

$('#DrawerMenu li > a.has-sub').hover(function(){ ... etc etc

$('#red').hover(function() {
  $(this).toggleClass('green')
});

#red {
  width: 100px;
  height: 100px;
  background-color: red;
}

.green {
  background-color: green !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="red"></div>

answered May 15 '17 at 08:10

StudioTime

22,603
38
120
207

Thanks@Darren , as you know big commerce not giving access to edit global variable to classes going to add dynamically, .hover not work for me .on('hover', functions ...etc work for me but the sub to sub menu to going to active. you can check it on firefox. – R.K.Bhardwaj May 15 '17 at 08:55

change onclick event into mousehover

2 Answers2