Question

如何将以下脚本更改为onhover而不是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>

这显示了我在移动模式下单击的子菜单我想在悬停时显示子菜单。这是网站https://machinetoolproducts.com/ 我用html和css代码更新了这个问题，但它没有正确显示结果。如需参考，请查看网站https://machinetoolproducts.com/

Answer 1

只需使用mouseover事件，而不是点击

$(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');

    });
});

这是一个片段：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

只需将其更改为使用.hover()

即可

在你的情况下，它将是：

$('#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>

将onclick事件更改为mousehover

2 个答案: