私がやりたいのは、ユーザーが内側のラップ要素の上にマウスを置いたときに開く「ボールト」を持つことです。私が遭遇した問題は、(少なくとも Chrome では) 「ドア」が内側のラップ要素の境界半径領域の下に隠されていなかったことです。これを修正する CSS のみの方法はありますか、それとももう少し複雑なものを検討する必要がありますか?
HTML:
<div class="vault-wrap-1">
<div class="vault-wrap-2">
<div class="vault-door-1"></div>
<div class="vault-door-2"></div>
</div>
</div>
CSS:
div.vault-wrap-1 {
height:600px;
width:600px;
border-radius:9999px;
background:green;
margin:auto;
padding:30px;
}
div.vault-wrap-2 {
height:600px;
width:600px;
border-radius:9999px;
background:blue;
overflow:hidden;
}
div.vault-door-1, div.vault-door-2 {
height:600px;
width:300px;
background:red;
}
div.vault-door-1 {
float:left;
}
div.vault-door-2 {
float:right;
}