如何设计带有子列表和子列表的列表，应在父列表的悬停上显示

Question

当指针悬停在“查看行”上时，应打开“查看新记录和＆旧记录”

<div>
     <li>Add Rows</li>
     <li>DeleteRows</li>
     <li>View Rows
       <ul>
         <li>View New Records</li>
         <li>View Old Records</li>
       </ul>
     </li>
    </div>

Answer 1

纯CSS

当您将鼠标悬停在“查看行”上时，请使用:hover来更改.records的显示。

.records {
  display: none;
}

.view:hover .records {
  display: block;
}

<div>
  <li>Add Rows</li>
  <li>DeleteRows</li>
  <li class="view">View Rows
    <ul class="records">
      <li>View New Records</li>
      <li>View Old Records</li>
    </ul>
  </li>
</div>

纯Javascript

和往常一样，有多种方法可以做到这一点。您可以使用如下所示的纯JavaScript。这使用.querySelectorAll()选择元素，.addEventListener()在mouseover和mouseleave上做某事。显然，这比以前的方法复杂和困难得多，但这为更多的自定义留有余地。

var records = document.querySelectorAll(".records");
var view = document.querySelectorAll(".view")[0];

view.addEventListener("mouseover", function() {
  records.forEach(e => {
    e.style.display = "block";
  });
});

view.addEventListener("mouseleave", function() {
  records.forEach(e => {
    e.style.display = "none";
  });
});

.records {
  display: none;
}

<div>
  <li>Add Rows</li>
  <li>DeleteRows</li>
  <li class="view">View Rows
    <ul class="records">
      <li>View New Records</li>
      <li>View Old Records</li>
    </ul>
  </li>
</div>

jQuery

当然，还有一个jQuery方法。它使用.hover()来检测何时将鼠标悬停在文本上，然后使用.show()来显示li。然后，您使用.mouseout()检测何时退出文本，并使用.hide()隐藏文本。

$(".records").hide();

$(".view").hover(function() {
  $(".records").show();
});

$(".view").mouseout(function() {
  $(".records").hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <li>Add Rows</li>
  <li>DeleteRows</li>
  <li class="view">View Rows
    <ul class="records">
      <li>View New Records</li>
      <li>View Old Records</li>
    </ul>
  </li>
</div>

Answer 2

您可以首先使用ul可见性隐藏和li：悬停ul可见性：可见，以显示在父列表的悬停上。

li:hover ul {
   visibility: visible;
} 

ul {
   visibility: hidden;
} 

<div>
     <li>Add Rows</li>
     <li>DeleteRows</li>
     <li>View Rows
       <ul>
         <li>View New Records</li>
         <li>View Old Records</li>
       </ul>
     </li>
    </div>

Answer 3

see js fiddle example here

ul {
  background: #333;
}

ul li {
  position: relative;
  list-style: none;
  display: inline-block;
  color: white;
}

ul ul {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: none;
  padding-left: 0;
}

ul li:hover ul {
  display: block;
}

ul ul li {
  display: block;
  width: 100%;
}

<div>
    <ul>
       <li>Add Rows</li>
       <li>DeleteRows</li>
       <li>View Rows
         <ul>
           <li>View New Records</li>
           <li>View Old Records</li>
         </ul>
       </li>
    </ul>
</div>