我有一个情况在这里我想显示一些关于悬停的数据我不知道如何使用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>
请帮帮我
答案 0 :(得分：0)
您可以使用鼠标悬停和鼠标离开功能（第一个锚点）或悬停功能（第二个锚点）。您需要向目标添加类或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>
答案 1 :(得分：0)
有几种方法可以实现这一点，以下是其中一种方法。
第1步：更新您的javascript代码，如下所示
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
return 0.1;
}
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section
{
return 0.1;
}
第2步：更新HTML代码部分，如下所示
<script>
$(document).ready(function(){
$("#nav li").hover(function(){
var datatoShow = $(this).attr('data');
$("#"+datatoShow).toggle();
});
});
</script>
默认显示“员工监控系统”：
在您的代码中执行以下更改：
第1步：更新javascript代码部分：
<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>
第2步：更新您的HTML代码，如下所示：
<script>
$(document).ready(function(){
$("#nav li").hover(function(){
$("#Employee").hide();
var datatoShow = $(this).attr('data');
$("#"+datatoShow).toggle();
});
});
</script>
答案 2 :(得分：0)
稍微调整了你的代码..希望这会有所帮助：）
$(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>