CSS：スタックされたdiv要素、ホバリングされたdivのみが境界線になる

Question

私はいくつかのスタックを持っていますdiv要素。ホバーでは、それぞれが境界になります。私は置くと

は今のdiv、ホバー1、およびその親のdivは国境を得ています。

JS Fiddle

<div class="container"> 
    <div class="button1"> 
     <div class="button11"> 
      <div class="button12"></div> 
     </div> 
    </div> 
</div> 

私は、次の作成に管理することはできません。

のdivだけ推移しているときに推移しのdiv国境を取得する必要がありますか？

ありがとうございます。

Answer 1

絶対配置を使用し、divを相対的に配置された要素内に配置します。ここでは、更新フィドル...この私の知る限り

https://jsfiddle.net/zekw31gq/4/

HTML

<div id="container"> 
    <div id="red"></div> 
    <div id="blue"></div> 
    <div id="black"></div> 
</div> 

CSS

#container { 
    position: relative; 
    width:300px; 
    height:300px; 
} 
#red { 
    position: absolute; 
    width:300px; 
    height:300px; 
    background:red; 
    border: 4px solid transparent; 
} 
#blue { 
    position: absolute; 
    margin:25px; 
    width:250px; 
    height:250px; 
    background:blue; 
    border: 4px solid transparent; 
} 
#black { 
    position: absolute; 
    margin:50px; 
    width:200px; 
    height:200px; 
    background:black; 
    border: 4px solid transparent; 
} 
#red:hover { 
    border-color: darkred; 
} 
#blue:hover { 
    border-color: darkblue; 
} 
#black:hover { 
    border-color: white; 
}