在悬停时显示另一个div

Question

i have a situation here i want to show some data on hover i have no idea how to use javascript

here is the code

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

now i want if hover on

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

it must show the data related to hospital -management-software if the hover or mouse over is done ie when hover this data should be shown

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

i have tried using javascript but no luck on hover it doesn't show instead it keep showing data from active class

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

});
</script>

please help me out

Answer 1

You can use mouseover and mouseleave functions(1st anchor) or the hover function(2nd anchor). You need to add class or id to your targets and add the jquery library.

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

There are several ways to achieve this, and following is one of the easy.

STEP 1: Update your javascript code as below

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

  });
</script>

STEP 2: Update your HTML code part as below

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

To show the " Employee Monitoring System " by default:

Do the following changes in your code:

STEP 1: Update javascript code part:

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

STEP 2: Update your HTML code as below:

<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

Have tweeked your code a bit.. Hope this helps :)

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