鼠标移入LI标签，对应的内容会显示出来，鼠标如何才能移入内容区域不消失？

Question

问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

父子关系不就行了，你把要显示的内容放在li元素里面

Answer 2

如果我描绘的不够清楚，可以参考一下 姿在家官网首页的头部导航tab切换

Answer 3

就是鼠标移入LI标签和移入内容的时候，内容都会显示，移出LI标签和移出内容的时候，会消失。可以看他自己源码怎么写的，http://image.zeststore.com/js...。还有这种网上很多例子可以参考

Answer 4

1. 参照 bootstrap，将内容写到 li 里面 bootstrap navbar

     <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         Dropdown
       </a>
       <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <a class="dropdown-item" href="#">Action</a>
         <a class="dropdown-item" href="#">Another action</a>
         <div class="dropdown-divider"></div>
         <a class="dropdown-item" href="#">Something else here</a>
       </div>
     </li>

   .dropdown {
     position: relative;
   }
   .dropdown-menu {
     position: absolute;
     top: 100%;
     left: 0;
     z-index: 1000;
     display: none;
     float: left;
     min-width: 10rem;
     list-style: none;
   }
   li.dropdown:hover .dropdown-menu {
     display: block;
   }

2. 姿在家官网等，类似tabs的实现，

   <div id="nav">
     <ul>
       <li data-tab="item1">...</li>
     </ul>
   </div>
   <div id="nav-content" style="display: none">
     <div id="item1" style="display:none">...</div>
   </div>

   js 控制当前 hover 的 li data-tab 对应id=item1的内容 display: block