jQuery从单击（）到悬停（）

我想将click（）更改为hover（）

这是我的密码

HTML:

这是原始代码，我尝试了一些更改，但没有成功。

---

当然，我不能将其更改为hover（）。

我认为您可以将单击更改为hover，请参见代码段中的控制台

var nowclick=0；
$（“.show_sub”）.hover（函数（）{
console.log（'悬停'）
$（“.show_sub”）.removeClass（“show_箭头”）；
清除超时（menut）；
如果（现在单击！=$（“.show_sub”）。索引（此））{
$（“#menu_down.block”）.hide（）；
$（“.show_sub”）.removeClass（“活动”）；
}
nowclick=$（“.show_sub”）.索引（此）；
$（此）.toggleClass（“活动”）；
$（“#menu_down.block”）.eq（立即单击）.slideToggle（）；
$（this.addClass（“show_arrow”）；
});
$（“#menu#menu down.block”）。悬停（函数（）{
清除超时（menut）；
}，函数（）{
menut=setTimeout（函数（）{
$（“.show_sub”）.removeClass（“show_箭头”）；
$（“#menu_down.block”）.hide（'blind'，500）；
$（“.show_sub”）.removeClass（“活动”）；
}, 880);
});

产品与解决方案
支持
单位
投资者关系
产品和解决方案
支持
单位
投资者关系
老实说，您可以使用CSS来完成这一切，不需要使用jQuery。您还应该使用HTML
和
中的无序列表，而不是在菜单中使用div。如果我不更改HTML代码，您能否指导我如何通过CSS执行此操作？如果我只是将方法从单击更改为悬停，则无法执行此操作。当我将鼠标移动到子菜单时，子菜单将消失。
<nav id="menu" >   
<div class="block">
    <A HREF="index.php" class="logo">
        <img src="images/logo.png" />
    </A>
    <div  class="show_sub active05 menu">
        Products & Solutions
    <!--    <div class="tips">
            <img src="images/menutip.png" />
            <span>Who you are?</span>
        </div> -->
    </div>
    <div  class="show_sub active05 menu">Support</div>
    <div  class="show_sub active05 menu">Company</div>

    <div  class="show_sub active05 menu">Investor Relations</div>

    <a href="contact.php" class="active05 menu">Contact</a>                                                             
    <div class="search">
        <form action="product_search.php" method="get" name="computerF" >
        <input type="text" name="keyword" placeholder="Search Product">
        <div class="button" onclick="javascript:document.computerF.submit();">
            <img src="images/search.jpg" />
        </div>
        </form>
    </div>        
</div>     
<div id="menu_down">
    <div class="block"> 
        <div class="name"><span>Products &<br /><b>Solutions</b></span></div>
        <div class="link_block">
            <div class="all_link">
                <!-- START BLOCK : procate1 -->
                <a href="product.php?id={id}" class="{p_active}">{catename}</a>

                <!-- END BLOCK : procate1 -->

            </div>    
        </div>
    </div>
    <div class="block">   
        <div class="name"><span>Support</span></div>
        <div class="link_block">
            <div class="all_link">
                <a href="event.php" class="{event}">Events</a>
                <a href="press.php" class="{press}">Press Release</a>
                <a href="video.php" class="{video}">Video</a>
                <a href="paper.php"  class="{paper}">White Paper & Infographics</a>
                <a href="about_RMA.php" class="{about_rma}">RMA Policy</a>
                <a href="about_green.php" class="{about_green}">Green Policy</a>
                <a href="about_step.php" class="{about_step}">One-stop Global Service</a>    
                <a href="about_care.php" class="{about_care}">Social Care</a>
                <a href="about_dis.php" class="{about_dis}">Disclaimer</a>
            </div>    
        </div>
    </div>
    <div class="block" >
        <div class="name">
            <span>
            Company
            </span>
        </div>
        <div class="link_block">
            <div class="all_link">
                <a href="about.php" class="{about}">Who are we</a>
                <a href="about_do.php" class="{about_do}">What we do</a>
                <a href="about_with.php" class="{about_with}">Careers</a>
                <a href="about_Cert.php" class="{about_cert}">Certification</a>

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

    <div class="block three_tree" >  
        <div class="name"><span>Investor<br /><b>Relations</b></span></div>
        <div class="link_block">
            <div class="all_link">
                <a href="investor.php" class="{investor}" >Material Information</a>
                <a href="investor_org.php" class="{investor_org}" >Company Organize and Structure</a> 
                <a href="investor_art.php" class="{investor_art}">Articles of Association</a>
                <a href="investor_Int.php" class="{investor_int}">Internal Audit</a>
                <a href="investor_report.php" class="{investor_report}">Sales Report</a>
                <a href="investor_divid.php"  class="{investor_divid}">Dividend Information</a>
                <a href="investor_proceed.php"  class="{investor_proceed}">Proceedings of General Meeting</a>
                <a href="investor_annual.php"  class="{investor_annual}">Annual Report</a>
                <a href="investor_stock.php"  class="{investor_stock}">Stock Quotes</a>
                <a href="investor_min.php"  class="{investor_min}">Minutes from the Board Meeting</a>
                <a href="investor_investor.php"  class="{investor_investor}">Investor Conference</a>
                <a href="investor_contact.php"  class="{investor_contact}">Contact with Problems Processing</a>
            </div>
        </div>
    </div>
</div>                                          

var nowclick=0;

$(".show_sub").click(function(){
    $(".show_sub").removeClass("show_arrow");
    clearTimeout(menut);
    if(nowclick != $(".show_sub").index(this)){
        $("#menu_down .block").hide();
        $(".show_sub").removeClass("active");
    }
    nowclick=$(".show_sub").index(this);

    $(this).toggleClass("active");
    $("#menu_down .block").eq(nowclick).slideToggle();
    $(this).addClass("show_arrow");
});

$("#menu #menu_down .block").hover(function(){
    clearTimeout(menut);
},function(){
    menut=setTimeout(function(){
        $(".show_sub").removeClass("show_arrow");
        $("#menu_down .block").hide('blind',500);
        $(".show_sub").removeClass("active");
    }, 880);
});