1. ホーム
  2. 質問と答え
  3. 子要素にホバー効果を追加するCSS/jquery

子要素にホバー効果を追加するCSS/jquery

2017-11-09 8 views
2

こんにちは私はJSONから自動生成されたHTMLファイルを持っています。 DOMを生成すると、サブレイヤーとサブレイヤーを持つレイヤーがあります。子要素にホバー効果を追加するCSS/jquery

各divをホバリングすると、ホバリングされたレイヤの境界線が表示されている必要があります。追加しようとしました：divに移動しますが、メインのdivにのみ適用されます。他のものはそれの下にあるので、影響を与えません。まだ動作していないポインタイベントを使用して試行します。以下にコードが追加されました。 「大きな」の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: 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>

出典

2017-11-09 Redmond Seyer

+0

あなただけの最も上のdivに置くため？ divの幅と高さを変更する – guradio

答えて

1

は基本的にして何が起こったのか、彼らは優先順位を持っていました。最初に「より大きな」要素を配置し、次にそれらを小さくしたり小さくしたりする必要があります。以下のコードスニペットを実行すると、動作することがわかります。

.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>

出典

2017-11-09 07:01:11 Polymer

+0

JSONファイルから自動生成されるため、DOM構造をどのように変更できますか？ –

+0

JSONファイルを別の順序で変更する - JSONファイルがありますか？質問にそれを含めることはできますか？ – Polymer

+0

こちらはhttps://api.myjson.com/bins/6atbz –

1 
<!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>

出典

2017-11-09 07:16:19

関連する問題

 関連する問題