Question

您好我有一个从JSON自动生成的HTML文件。在生成DOM时，我有子层和子层的层......等等。

现在，在悬停每个div时，悬停层的边框必须可见。我尝试添加：悬停到div，但它只适用于主div。其他人没有效果，因为它位于它下面。尝试使用指针事件仍然无法正常工作。代码在下面添加。感谢

.layer {
  position: absolute;
  border: 1px solid transparent;
}

.layer:hover {
  border: 1px solid blue;
  pointer-events: auto;
}

<body>
  <div>
    <div class="layer" style="left: 215px; top: 79px; width: 234px; height: 35px;">
      Layer
      <div class="layer" style="left: 0px; top: 0px; width: 234px; height: 35px;">
        Layer
        <div class="layer" style="left: 0px; top: 0px; width: 234px; height: 35px;">
          Layer
          <div class="layer" style="left: 0px; top: 0px; width: 234px; height: 35px;">Layer</div>
        </div>
      </div>
    </div>
    <div class="layer" style="left: 220px; top: 153px; width: 256px; height: 57px;">Layer
      <div class="layer" style="left: 0px; top: 0px; width: 130px; height: 23px;">Layer</div>
      <div class="layer" style="left: 14px; top: 29px; width: 39px; height: 23px;">Layer</div>
      <div class="layer" style="left: 0px; top: 27px; width: 256px; height: 30px;">Layer
        <div class="layer" style="left: 0px; top: 0px; width: 256px; height: 30px;">Layer</div>
      </div>
    </div>
    <div class="layer" style="left: 496px; top: 147px; width: 256px; height: 72px;">Layer
      <div class="layer" style="left: 0px; top: 6.125px; width: 130px; height: 23px;">Layer</div>
      <div class="layer" style="left: 14px; top: 35.375px; width: 39px; height: 23px;">Layer</div>
      <div class="layer" style="left: 0px; top: 33px; width: 256px; height: 30px;">
        <div class="layer" style="left: 0px; top: 0px; width: 256px; height: 30px;"></div>
      </div>
    </div>
    <div class="layer" style="left: 220px; top: 219px; width: 256px; height: 72px;">
      <div class="layer" style="left: 0px; top: 6.125px; width: 130px; height: 23px;"></div>
      <div class="layer" style="left: 14px; top: 35.375px; width: 39px; height: 23px;"></div>
      <div class="layer" style="left: 0px; top: 33px; width: 256px; height: 30px;">
        <div class="layer" style="left: 0px; top: 0px; width: 256px; height: 30px;"></div>
      </div>
    </div>
    <div class="layer" style="left: 496px; top: 219px; width: 256px; height: 72px;">
      <div class="layer" style="left: 0px; top: 6.125px; width: 130px; height: 23px;"></div>
      <div class="layer" style="left: 14px; top: 35.375px; width: 39px; height: 23px;"></div>
      <div class="layer" style="left: 0px; top: 33px; width: 256px; height: 30px;">
        <div class="layer" style="left: 0px; top: 0px; width: 256px; height: 30px;"></div>
      </div>
    </div>
    <div class="layer" style="left: 220px; top: 291px; width: 256px; height: 72px;">
      <div class="layer" style="left: 0px; top: 6.125px; width: 130px; height: 23px;"></div>
      <div class="layer" style="left: 14px; top: 35.375px; width: 39px; height: 23px;"></div>
      <div class="layer" style="left: 0px; top: 33px; width: 256px; height: 30px;">
        <div class="layer" style="left: 0px; top: 0px; width: 256px; height: 30px;"></div>
      </div>
    </div>
    <div class="layer" style="left: 220px; top: 373px; width: 117px; height: 40px;">
      <div class="layer" style="left: 14px; top: 8px; width: 89px; height: 23px;">
        <div class="layer" style="left: 0px; top: 0px; width: 89px; height: 23px;"></div>
      </div>
      <div class="layer" style="left: 0px; top: 0px; width: 117px; height: 40px;">
        <div class="layer" style="left: 0px; top: 0px; width: 117px; height: 40px;"></div>
      </div>
    </div>
    <div class="layer" style="left: 162px; top: 33px; width: 700px; height: 475px;">
      <div class="layer" style="left: 0px; top: 0px; width: 700px; height: 475px;"></div>
    </div>
    <div class="layer" style="left: 0px; top: 0px; width: 1024px; height: 541px;">
      <div class="layer" style="left: 0px; top: 0px; width: 1024px; height: 541px;"></div>
    </div>
  </div>
</body>

Answer 1

基本上发生了什么，因为'更大'的div在DOM树中是最后一个，他们有优先权。你需要先把'更大'的元素放在第一位，然后再将它们变得越来越小。运行以下代码段，您将看到它有效。

.layer {
  position: absolute;
  border: 1px solid transparent;
}

.layer:hover {
  border: 1px solid blue;
  pointer-events: auto;
}

<body>
  <div>
<div class="layer" style="left: 0px; top: 0px; width: 1024px; height: 541px;">
  <div class="layer" style="left: 0px; top: 0px; width: 1024px; height: 541px;"></div>
</div><div class="layer" style="left: 162px; top: 33px; width: 700px; height: 475px;">
  <div class="layer" style="left: 0px; top: 0px; width: 700px; height: 475px;"></div>
</div><div class="layer" style="left: 215px; top: 79px; width: 234px; height: 35px;">
  Layer
  <div class="layer" style="left: 0px; top: 0px; width: 234px; height: 35px;">
    Layer
    <div class="layer" style="left: 0px; top: 0px; width: 234px; height: 35px;">
      Layer
      <div class="layer" style="left: 0px; top: 0px; width: 234px; height: 35px;">Layer</div>
    </div>
  </div>
</div>
<div class="layer" style="left: 220px; top: 153px; width: 256px; height: 57px;">Layer
  <div class="layer" style="left: 0px; top: 0px; width: 130px; height: 23px;">Layer</div>
  <div class="layer" style="left: 14px; top: 29px; width: 39px; height: 23px;">Layer</div>
  <div class="layer" style="left: 0px; top: 27px; width: 256px; height: 30px;">Layer
    <div class="layer" style="left: 0px; top: 0px; width: 256px; height: 30px;">Layer</div>
  </div>
</div>
<div class="layer" style="left: 496px; top: 147px; width: 256px; height: 72px;">Layer
  <div class="layer" style="left: 0px; top: 6.125px; width: 130px; height: 23px;">Layer</div>
  <div class="layer" style="left: 14px; top: 35.375px; width: 39px; height: 23px;">Layer</div>
  <div class="layer" style="left: 0px; top: 33px; width: 256px; height: 30px;">
    <div class="layer" style="left: 0px; top: 0px; width: 256px; height: 30px;"></div>
  </div>
</div>
<div class="layer" style="left: 220px; top: 219px; width: 256px; height: 72px;">
  <div class="layer" style="left: 0px; top: 6.125px; width: 130px; height: 23px;"></div>
  <div class="layer" style="left: 14px; top: 35.375px; width: 39px; height: 23px;"></div>
  <div class="layer" style="left: 0px; top: 33px; width: 256px; height: 30px;">
    <div class="layer" style="left: 0px; top: 0px; width: 256px; height: 30px;"></div>
  </div>
</div>
<div class="layer" style="left: 496px; top: 219px; width: 256px; height: 72px;">
  <div class="layer" style="left: 0px; top: 6.125px; width: 130px; height: 23px;"></div>
  <div class="layer" style="left: 14px; top: 35.375px; width: 39px; height: 23px;"></div>
  <div class="layer" style="left: 0px; top: 33px; width: 256px; height: 30px;">
    <div class="layer" style="left: 0px; top: 0px; width: 256px; height: 30px;"></div>
  </div>
</div>
<div class="layer" style="left: 220px; top: 291px; width: 256px; height: 72px;">
  <div class="layer" style="left: 0px; top: 6.125px; width: 130px; height: 23px;"></div>
  <div class="layer" style="left: 14px; top: 35.375px; width: 39px; height: 23px;"></div>
  <div class="layer" style="left: 0px; top: 33px; width: 256px; height: 30px;">
    <div class="layer" style="left: 0px; top: 0px; width: 256px; height: 30px;"></div>
  </div>
</div>
<div class="layer" style="left: 220px; top: 373px; width: 117px; height: 40px;">
  <div class="layer" style="left: 14px; top: 8px; width: 89px; height: 23px;">
    <div class="layer" style="left: 0px; top: 0px; width: 89px; height: 23px;"></div>
  </div>
  <div class="layer" style="left: 0px; top: 0px; width: 117px; height: 40px;">
    <div class="layer" style="left: 0px; top: 0px; width: 117px; height: 40px;"></div>
  </div>
</div>


  </div>
</body>

Answer 2

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    .mainlayer {
      position: absolute;
      border: 1px solid transparent;
    }

    .layer:hover {
      border: 1px solid blue;
      pointer-events: auto;
    }
  </style>
</head>

<body>

  <body>
    <div>
      <div class="mainlayer" style="left: 215px; top: 79px; width: 234px; height: 35px;">
        <div class="layer" style="left: 0px; top: 0px; width: 234px; height: 35px;">
          Layer
        </div>
        <div class="layer" style="left: 0px; top: 0px; width: 234px; height: 35px;">
          Layer
        </div>
        <div class="layer" style="left: 0px; top: 0px; width: 234px; height: 35px;">
          Layer
        </div>
      </div>

      <div class="mainlayer" style="left: 220px; top: 153px; width: 256px; height: 57px;">Layer
        <div class="layer" style="left: 0px; top: 0px; width: 130px; height: 23px;">Layer</div>
        <div class="layer" style="left: 14px; top: 29px; width: 39px; height: 23px;">Layer</div>
        <div class="layer" style="left: 0px; top: 27px; width: 256px; height: 30px;">Layer</div>
          <div class="layer" style="left: 0px; top: 0px; width: 256px; height: 30px;">Layer</div>
        </div>
      <div class="mainlayer" style="left: 496px; top: 147px; width: 256px; height: 72px;">Layer
        <div class="layer" style="left: 0px; top: 6.125px; width: 130px; height: 23px;">Layer</div>
        <div class="layer" style="left: 14px; top: 35.375px; width: 39px; height: 23px;">Layer</div>
        <div class="layer" style="left: 0px; top: 33px; width: 256px; height: 30px;"></div>
          <div class="layer" style="left: 0px; top: 0px; width: 256px; height: 30px;"></div>
        </div>
      <div class="mainlayer" style="left: 220px; top: 219px; width: 256px; height: 72px;">
        <div class="layer" style="left: 0px; top: 6.125px; width: 130px; height: 23px;"></div>
        <div class="layer" style="left: 14px; top: 35.375px; width: 39px; height: 23px;"></div>
        <div class="layer" style="left: 0px; top: 33px; width: 256px; height: 30px;"></div>
          <div class="layer" style="left: 0px; top: 0px; width: 256px; height: 30px;"></div>
      </div>
      <div class="mainlayer" style="left: 496px; top: 219px; width: 256px; height: 72px;">
        <div class="layer" style="left: 0px; top: 6.125px; width: 130px; height: 23px;"></div>
        <div class="layer" style="left: 14px; top: 35.375px; width: 39px; height: 23px;"></div>
        <div class="layer" style="left: 0px; top: 33px; width: 256px; height: 30px;"></div>
          <div class="layer" style="left: 0px; top: 0px; width: 256px; height: 30px;"></div>
        </div>
      <div class="mainlayer" style="left: 220px; top: 291px; width: 256px; height: 72px;">
        <div class="layer" style="left: 0px; top: 6.125px; width: 130px; height: 23px;"></div>
        <div class="layer" style="left: 14px; top: 35.375px; width: 39px; height: 23px;"></div>
        <div class="layer" style="left: 0px; top: 33px; width: 256px; height: 30px;"></div>
          <div class="layer" style="left: 0px; top: 0px; width: 256px; height: 30px;"></div>
      </div>
      <div class="mainlayer" style="left: 220px; top: 373px; width: 117px; height: 40px;">
        <div class="layer" style="left: 14px; top: 8px; width: 89px; height: 23px;"></div>
          <div class="layer" style="left: 0px; top: 0px; width: 89px; height: 23px;"></div>
        </div>
        <div class="layer" style="left: 0px; top: 0px; width: 117px; height: 40px;">
          <div class="layer" style="left: 0px; top: 0px; width: 117px; height: 40px;"></div>
        </div>
      <div class="mainlayer" style="left: 162px; top: 33px; width: 117px; height: 40px;">
        <div class="layer" style="left: 0px; top: 0px;  width: 117px; height: 40px;"></div>
      </div>
      <div class="mainlayer" style="left: 0px; top: 0px; width: 117px; height: 40px;">
        <div class="layer" style="left: 0px; top: 0px; width: 117px; height: 40px;"></div>
      </div>
    </div>
  </body>
</body>

</html>

将悬停效果添加到子元素css / jquery

2 个答案: