Question

我有以下动态生成的html。我的目标是显示下拉列表，其中包含标记＃level2中的链接，当鼠标移到相应的父li标签时。

<div id="level1" style="position: relative; display: inline-block;">
    <li id="0" style="height: 30px; min-width: 190px; list-style: outside none none; border: 1px solid rgb(125, 153, 202); text-align: left; padding: 5%; margin-left: 10px; margin-right: 2%; border-radius: 1px; font-size: 12px; font-weight: bold; color: rgb(255, 255, 255); background-color: rgb(96, 96, 96);"> o Operating System ▸</li>
        <div id="level2" style="display: none; position: absolute; min-width: 160px;">
            <a href="#" style="display: block; padding: 12px 16px; color: blue;">Introduction </a>
            <a href="#" style="display: block; padding: 12px 16px; color: blue;">Synchronization</a>
            <a href="#" style="display: block; padding: 12px 16px; color: blue;">Memory & Cache management</a>
            <a href="#" style="display: block; padding: 12px 16px; color: blue;">File system</a>
            <a href="#" style="display: block; padding: 12px 16px; color: blue;">Storage management</a>
            <a href="#" style="display: block; padding: 12px 16px; color: blue;">Management of process and threads</a>
            <a href="#" style="display: block; padding: 12px 16px; color: blue;">Deadlock</a>
        </div>
    <li id="1" style="height: 30px; min-width: 190px; list-style: outside none none; border: 1px solid rgb(125, 153, 202); text-align: left; padding: 5%; margin-left: 10px; margin-right: 2%; border-radius: 1px; font-size: 12px; font-weight: bold; color: rgb(255, 255, 255); background-color: rgb(96, 96, 96);"> o Data Structures ▸</li>
        <div id="level2" style="display: none; position: absolute; min-width: 160px;">
            <a href="#" style="display: block; padding: 12px 16px; color: blue;">Basics</a>
            <a href="#" style="display: block; padding: 12px 16px; color: blue;">Singly Linked List</a>
            <a href="#" style="display: block; padding: 12px 16px; color: blue;">Doubly Linked list</a>
            <a href="#" style="display: block; padding: 12px 16px; color: blue;">Trees</a>
            <a href="#" style="display: block; padding: 12px 16px; color: blue;">Hash</a>
            <a href="#" style="display: block; padding: 12px 16px; color: blue;">Graphs</a>
        </div>
</div>

为了实现这个目标，我在函数中使用了以下规则来动态生成css，但它没有帮助我。

element = "#level1";
$(element).css("position", "relative");
$(element).css("display", "inline-block");

for(i = 0; i < 20; i++){
    element = "#level1 li#" + i + ":hover > #level2";
    $(element).css("display", "block");
}

element = "#level1 #level2";
$(element).css("display", "none");
$(element).css("position", "absolute");
$(element).css("backgroud-color", "#f9f9f9");
$(element).css("min-width", "160px");

element = "#level1 #level2 a";
$(element).css("display", "block");
$(element).css("padding", "12px 16px");
$(element).css("color", "blue");

element = "#level1 #level2 a:hover";
$(element).css("background-color", "#606060");

谢谢＆amp;此致

Answer 1

这是一个纯CSS示例。我使用外部CSS使其更易于管理。另外，这是一个JSFiddle。

HTML：（将您的＃level1设为<ul>，为您的<div>提供一个类，删除内联CSS

<ul>
  <li> o Operating System ▸
    <div class="hidden-div">
      <a href="#">Introduction </a>
      <a href="#">Synchronization</a>
      <a href="#">Memory &amp; Cache management</a>
      <a href="#">File system</a>
      <a href="#">Storage management</a>
      <a href="#">Management of process and threads</a>
      <a href="#">Deadlock</a>
    </div>
  </li>
  <li> o Data Structures ▸
    <div class="hidden-div">
      <a href="#">Basics</a>
      <a href="#">Singly Linked List</a>
      <a href="#">Doubly Linked list</a>
      <a href="#">Trees</a>
      <a href="#">Hash</a>
      <a href="#">Graphs</a>
    </div>
  </li>
</ul>

CSS：（根据需要更改了一些小的内容）

li {
  float: left;
  width: 200px;
  height: 30px;
  list-style: outside none none;
  border: 1px solid rgb(125, 153, 202);
  text-align: left;
  padding: 10px;
  border-radius: 1px;
  font-size: 12px;
  font-weight: bold;
  color: rgb(255, 255, 255);
  background-color: rgb(96, 96, 96);
}

.hidden-div {
  margin-top: 26px;
  visibility: hidden;
}

.hidden-div a {
  display: block;
  padding: 12px 16px;
  color: blue;
  background-color: rgb(200, 200, 200);
}

li:hover .hidden-div {
  visibility: visible;
}

鼠标悬停列表未显示

1 个答案: