Fatal编程技术网
  • javascript/
  • Javascript 向css/jquery子元素添加悬停效果

Javascript 向css/jquery子元素添加悬停效果

javascript jquery html css

Javascript 向css/jquery子元素添加悬停效果,javascript,jquery,html,css,Javascript,Jquery,Html,Css,嗨，我有一个从JSON自动生成的HTML文件。在生成DOM时，我有带有子层和子层的层…等等 现在在悬停每个div时，悬停层的边界必须可见。我尝试在div中添加：hover，但它只适用于主div。其他div不起作用，因为它位于主div下面。尝试过使用指针事件，但仍不起作用。代码添加到下面。谢谢 .layer{ 位置：绝对位置； 边框：1px实心透明； } .图层：悬停{ 边框：1px纯蓝色； 指针事件：自动； } 层 层 层 层 层 层 层 层 层 层 层 层 本质上发生的是，因为“较大”的d

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

现在在悬停每个div时，悬停层的边界必须可见。我尝试在div中添加：hover，但它只适用于主div。其他div不起作用，因为它位于主div下面。尝试过使用指针事件，但仍不起作用。代码添加到下面。谢谢

.layer{
位置：绝对位置；
边框：1px实心透明；
}
.图层：悬停{
边框：1px纯蓝色；
指针事件：自动；
}

层
层
层
层
层
层
层
层
层
层
层
层
本质上发生的是，因为“较大”的div是DOM树中的最后一个，所以它们具有优先级。你需要先把“更大”的元素放进去，然后把它们放下去，让它们越来越小。运行下面的代码段，您将看到它是有效的

.layer{
位置：绝对位置；
边框：1px实心透明；
}
.图层：悬停{
边框：1px纯蓝色；
指针事件：自动；
}

层
层
层
层
层
层
层
层
层
层
层
层


.mainlayer{
位置：绝对位置；
边框：1px实心透明；
}
.图层：悬停{
边框：1px纯蓝色；
指针事件：自动；
}
层
层
层
层
层
层
层
层
层
层
层
因为您只悬停在最上面的div上？更改div的宽度和高度，但是如何更改DOM结构，因为它是从JSON文件自动生成的？将JSON文件更改为不同的顺序-您有JSON文件吗？你能把它包括在问题里吗？啊！因此，层中有层。有趣。试试这个，对于每个父级，给它一个z索引10，然后，对于每个子级，在索引中再加一个1。例如，父对象（3深）的子对象的子对象的z索引为12。在生成代码时通过JavaScript设置它（jQuery应该是
$（element）.css（“z-index”，10）
） 
<!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>