在悬停时显示另一个div

Question

我在这里遇到一种情况，我想显示一些悬停数据，我不知道如何使用javascript

这是代码

 $(document).ready(function(){ $("#nav li.active-class").hover(function(){ $(".nav-hide").addClass('show-nav'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="collapse navbar-collapse js-navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="about-us.html">About Us</a></li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products<span class="icon ion-ios-arrow-down pull-right"></span></a> <ul class="dropdown-menu mega-dropdown-menu row navigation"> <div class="container"> <li> <div class="col-sm-4"> <div class="left-area"> <button type="button" class="btn all-product-btn">All Products</button> <hr> <ul id="nav"> <li class="active-class"><a href="employee-monitoring-system.html">Employee Monitoring System</a></li> <li><a href="hospital-management-software/index.html">Hospital Management Software</a></li> <li><a href="school-management-system/index.html">School Management System</a></li> <li><a href="inventory-management-software/index.html">Inventory Management Software</a></li> <li><a href="fee-management-system.html">Fee Management System</a></li> <li><a href="lead-management-system/index.html">Lead Management System</a></li> <li><a href="customer-relationship-management.html">Customer Relationship Management</a></li> <li><a href="human-resource-management-software.html">Human Resource Management Software</a></li> <li><a href="enterprises-resource-planning.html">Enterprises Resource Planning</a></li> <li><a href="customize-e-commerce-portals.html">Customize E-Commerce Portals</a></li> </ul> </div> </div> <div class="col-sm-8 nav-hide show-nav"> <div class="right-area"> <h3>Employee Monitoring System</h3> <p></p> <div class="col-md-7"> <ul> <li>A Unique System that peforms employee monitoring.</li> <li>Prevents unauthorised exchange of data</li> <li>Could not be identified by a user</li> <li>Captures their Keystrokes</li> <li>Caputres their Screen Shots</li> <li>Uploads text files</li> </ul> </div> <div class="col-md-5"><img src="img/products/ems.jpg" class="img-responsive"></div> </div> </div> </li> <div class="col-sm-8 nav-hide"> <div class="right-area"> <h3>Hospital Management Software</h3> <div class="col-md-7"> <ul> <li>Reduces the amount of paper work.</li> <li>Recording information about the Patients that come.</li> <li>Generating bills.</li> <li>Recording information related to diagnosis given to Patients.</li> <li>Keeping record of the Immunization provided to children/patients.</li> </ul> </div> <div class="col-md-5"><img src="img/products/hospital.jpg" class="img-responsive"></div> </div> </div> </ul> </div> 

现在我想如果悬停

   <li><a href="hospital-management-software/index.html">Hospital Management Software</a></li>

如果完成了悬停或鼠标悬停，则它必须显示与医院管理软件有关的数据，即悬停时应显示此数据

<div class="col-sm-8 nav-hide">
<div class="right-area">
<h3>Hospital Management Software</h3>
<div class="col-md-7">
<ul>
<li>Reduces the amount of paper work.</li>
<li>Recording information about the Patients that come.</li>
<li>Generating bills.</li>
<li>Recording information related to diagnosis given to Patients.</li>
<li>Keeping record of the Immunization provided to children/patients.</li>    
</ul>
</div>
<div class="col-md-5"><img src="img/products/hospital.jpg" class="img-responsive"></div>
</div>
</div>

我试过使用javascript，但悬停时没有运气，它不会显示，而是继续显示活动类的数据

<script>
$(document).ready(function(){
    $("#nav li.active-class").hover(function(){
        $(".nav-hide").addClass('show-nav');
    });

});
</script>

请帮帮我

Answer 1

您可以使用mouseover和mouseleave函数（第一个锚点）或悬停功能（第二个锚点）。 您需要向您的目标添加类或id并添加jquery库。

 $("#hosp_man").mouseover( function(){ $("#hidden_div").fadeIn(100) }); $("#hosp_man").mouseleave( function(){ $("#hidden_div").fadeOut(100) }); $('#hosp_man2').hover(function(e){ $("#hidden_div").fadeIn(100) }, function(){ $("#hidden_div").fadeOut(100) }); 

 #hidden_div{ display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a id="hosp_man" href="hospital-management-software/index.html">Hospital Management Software</a> <br> <a id="hosp_man2" href="hospital-management-software/index.html">Hospital Management Software</a> <div class="col-sm-8" id="hidden_div"> <div class="right-area"> <h3>Hospital Management Software</h3> <div class="col-md-7"> <ul> <li>Reduces the amount of paper work.</li> <li>Recording information about the Patients that come.</li> <li>Generating bills.</li> <li>Recording information related to diagnosis given to Patients.</li> <li>Keeping record of the Immunization provided to children/patients.</li> </ul> </div> </div> </div> 

Answer 2

有多种方法可以实现此目的，而以下是一种简便的方法。

步骤1：如下更新您的JavaScript代码

<script>
  $(document).ready(function(){
    $("#nav li").hover(function(){
       var datatoShow = $(this).attr('data');
        $("#"+datatoShow).toggle();
    });

  });
</script>

步骤2：如下更新HTML代码部分

<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="about-us.html">About Us</a></li>
<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Products<span class="icon ion-ios-arrow-down pull-right"></span></a>
<ul class="dropdown-menu mega-dropdown-menu row navigation">
<div class="container">
<li>
<div class="col-sm-4">
<div class="left-area">
<button type="button" class="btn all-product-btn">All Products</button>
<hr>
<ul id="nav">
<li class="active-class" data="Employee"><a href="employee-monitoring-system.html">Employee Monitoring System</a></li>
<li data="Hospital"><a href="hospital-management-software/index.html" >Hospital Management Software</a></li>
<li data="School"><a href="school-management-system/index.html">School Management System</a></li>
<li data="Inventory"><a href="inventory-management-software/index.html">Inventory Management Software</a></li>
<li data="Fee"><a href="fee-management-system.html">Fee Management System</a></li>
<li data="Lead"><a href="lead-management-system/index.html">Lead Management System</a></li>
<li data="Customer"><a href="customer-relationship-management.html">Customer Relationship Management</a></li>
<li data="Human"><a href="human-resource-management-software.html">Human Resource Management Software</a></li>
<li data="Enterprises"><a href="enterprises-resource-planning.html">Enterprises Resource Planning</a></li>
<li data="Commerce"><a href="customize-e-commerce-portals.html">Customize E-Commerce Portals</a></li>
</ul>
</div>
</div>
<div id="Employee" class="col-sm-8 active-class" style="display:none">
<div class="right-area">
<h3>Employee Monitoring System</h3>
<p></p>
<div class="col-md-7">
<ul>
<li>A Unique System that peforms employee monitoring.</li>
<li>Prevents unauthorised exchange of data</li>
<li>Could not be identified by a user</li>
<li>Captures their Keystrokes</li>
<li>Caputres their Screen Shots</li>
<li>Uploads text files</li>
</ul>
</div>
<div class="col-md-5"><img src="img/products/ems.jpg" class="img-responsive"></div>
</div>
</div>
</li>

<div id="Hospital" class="col-sm-8 nav-hide"   style="display:none">
<div class="right-area">
<h3>Hospital Management Software</h3>
<div class="col-md-7">
<ul>
<li>Reduces the amount of paper work.</li>
<li>Recording information about the Patients that come.</li>
<li>Generating bills.</li>
<li>Recording information related to diagnosis given to Patients.</li>
<li>Keeping record of the Immunization provided to children/patients.</li>    
</ul>
</div>
<div class="col-md-5"><img src="img/products/hospital.jpg" class="img-responsive"></div>
</div>
</div>
</ul>
</div>

要默认显示“员工监控系统”：

在代码中进行以下更改：

步骤1：更新javascript代码部分：

<script>
  $(document).ready(function(){
     $("#nav li").hover(function(){
     $("#Employee").hide();
     var datatoShow = $(this).attr('data');
     $("#"+datatoShow).toggle();
   });
  });
</script>

步骤2：如下更新HTML代码：

<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="about-us.html">About Us</a></li>
<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Products<span class="icon ion-ios-arrow-down pull-right"></span></a>
<ul class="dropdown-menu mega-dropdown-menu row navigation">
<div class="container">
<li>
<div class="col-sm-4">
<div class="left-area">
<button type="button" class="btn all-product-btn">All Products</button>
<hr>
<ul id="nav">
<li class="active-class" data="Employee"><a href="employee-monitoring-system.html">Employee Monitoring System</a></li>
<li data="Hospital"><a href="hospital-management-software/index.html" >Hospital Management Software</a></li>
<li data="School"><a href="school-management-system/index.html">School Management System</a></li>
<li data="Inventory"><a href="inventory-management-software/index.html">Inventory Management Software</a></li>
<li data="Fee"><a href="fee-management-system.html">Fee Management System</a></li>
<li data="Lead"><a href="lead-management-system/index.html">Lead Management System</a></li>
<li data="Customer"><a href="customer-relationship-management.html">Customer Relationship Management</a></li>
<li data="Human"><a href="human-resource-management-software.html">Human Resource Management Software</a></li>
<li data="Enterprises"><a href="enterprises-resource-planning.html">Enterprises Resource Planning</a></li>
<li data="Commerce"><a href="customize-e-commerce-portals.html">Customize E-Commerce Portals</a></li>
</ul>
</div>
</div>
<div id="Employee" class="col-sm-8 nav-hide" >
<div class="right-area">
<h3>Employee Monitoring System</h3>
<p></p>
<div class="col-md-7">
<ul>
<li>A Unique System that peforms employee monitoring.</li>
<li>Prevents unauthorised exchange of data</li>
<li>Could not be identified by a user</li>
<li>Captures their Keystrokes</li>
<li>Caputres their Screen Shots</li>
<li>Uploads text files</li>
</ul>
</div>
<div class="col-md-5"><img src="img/products/ems.jpg" class="img-responsive"></div>
</div>
</div>
</li>

<div id="Hospital" class="col-sm-8 nav-hide"   style="display:none">
<div class="right-area">
<h3>Hospital Management Software</h3>
<div class="col-md-7">
<ul>
<li>Reduces the amount of paper work.</li>
<li>Recording information about the Patients that come.</li>
<li>Generating bills.</li>
<li>Recording information related to diagnosis given to Patients.</li>
<li>Keeping record of the Immunization provided to children/patients.</li>    
</ul>
</div>
<div class="col-md-5"><img src="img/products/hospital.jpg" class="img-responsive"></div>
</div>
</div>
</ul>
</div>

Answer 3

对您的代码进行了调整。希望对您有所帮助：)

 $(document).ready(function(){ $("#nav li").hover(function(){ var abc = $(this).data('open'); $('.'+abc).removeClass('hide'); }, function() { $('.detailed_div').addClass('hide'); }); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="collapse navbar-collapse js-navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="about-us.html">About Us</a></li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products<span class="icon ion-ios-arrow-down pull-right"></span></a> <ul class="dropdown-menu mega-dropdown-menu row navigation"> <div class="container"> <li> <div class="col-sm-4"> <div class="left-area"> <button type="button" class="btn all-product-btn">All Products</button> <hr> <ul id="nav"> <li class="active-class" data-open="emp-monitoring"><a href="employee-monitoring-system.html">Employee Monitoring System</a></li> <li data-open="hosp-management"><a href="hospital-management-software/index.html">Hospital Management Software</a></li> <li><a href="school-management-system/index.html">School Management System</a></li> <li><a href="inventory-management-software/index.html">Inventory Management Software</a></li> <li><a href="fee-management-system.html">Fee Management System</a></li> <li><a href="lead-management-system/index.html">Lead Management System</a></li> <li><a href="customer-relationship-management.html">Customer Relationship Management</a></li> <li><a href="human-resource-management-software.html">Human Resource Management Software</a></li> <li><a href="enterprises-resource-planning.html">Enterprises Resource Planning</a></li> <li><a href="customize-e-commerce-portals.html">Customize E-Commerce Portals</a></li> </ul> </div> </div> </li> <div class="emp-monitoring detailed_div col-sm-8 nav-hide hide"> <div class="right-area"> <h3>Employee Monitoring System</h3> <p></p> <div class="col-md-7"> <ul> <li>A Unique System that peforms employee monitoring.</li> <li>Prevents unauthorised exchange of data</li> <li>Could not be identified by a user</li> <li>Captures their Keystrokes</li> <li>Caputres their Screen Shots</li> <li>Uploads text files</li> </ul> </div> <div class="col-md-5"><img src="img/products/ems.jpg" class="img-responsive"></div> </div> </div> <div class="hosp-management detailed_div col-sm-8 nav-hide hide"> <div class="right-area"> <h3>Hospital Management Software</h3> <div class="col-md-7"> <ul> <li>Reduces the amount of paper work.</li> <li>Recording information about the Patients that come.</li> <li>Generating bills.</li> <li>Recording information related to diagnosis given to Patients.</li> <li>Keeping record of the Immunization provided to children/patients.</li> </ul> </div> <div class="col-md-5"><img src="img/products/hospital.jpg" class="img-responsive"></div> </div> </div> </ul> </div>