javascript - 给子元素添加悬停效果css/jquery

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

现在悬停每个 div 时，悬停层的边框必须可见。我尝试将 :hover 添加到 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>

最佳答案

基本上发生的事情是，因为“更大”的 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>

关于javascript - 给子元素添加悬停效果css/jquery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47195661/

javascript - 给子元素添加悬停效果css/jquery

上一篇：javascript - 如何使用逗号分隔值在数据表中进行自定义过滤？

下一篇：html - 侧边栏滚动结束时防止内容 div 滚动