Question

这里我有一个菜单现在问题是当我悬停在任何li上它显示左侧的一些内容但是当移除悬停时内容被隐藏 here is the link 现在当我们将菜单产品悬停在主机管理系统上时，如果我们想减少纸张工作量，它就隐藏了我想要显示的东西这是代码

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/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" 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>

此处how it should work

它应该像这个菜单一样兴奋地工作

Answer 1

在这种情况下， CSS trickery Gregory Schier 可以实现这一点。

您可以通过应用:hover事件发生时的一些动画和缓动来使用您自己的项目，使其看起来像IBM India的网站示例。

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    display: none;
    margin: 0;

    list-style: none; /** Remove list bullets */
    width: 100%; /** Set the width to 100% of it's parent */
    padding: 0;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

/** Button Styles **/
.dropdown button {
    background: #FF6223;
    color: #FFFFFF;
    border: none;
    margin: 0;
    padding: 0.4em 0.8em;
    font-size: 1em;
}

/** List Item Styles **/
.dropdown a {
    display: block;
    padding: 0.2em 0.8em;
    text-decoration: none;
    background: #CCCCCC;
    color: #333333;
}

/** List Item Hover Styles **/
.dropdown a:hover {
    background: #BBBBBB;
}

<!-- dropdown container -->
<div class="dropdown">

    <!-- trigger button -->
    <button>Navigate</button>

    <!-- dropdown menu -->
    <ul class="dropdown-menu">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</div>

Answer 2

相反，这样做

$(document).ready(function() {
   $("#nav li").hover(function() {
   var datatoShow = $(this).attr('data');
   $(".nav-hide").hide();
   $("#" + datatoShow).show();
  });
});

删除悬停时，div内容隐藏

2 个答案: