html - 在CSS中执行悬停时如何使子元素不填充他的父元素？

Question

这是一个简单的例子:

.a{
    background-color : red;
    height : 30px;
    width : 100px;
    overflow : hidden;
}

.b{
    background-color : green;
    height : 30px;
    width : 100px;
    margin-top : 50px;  
}

.a:hover{
    display : block;
    background-color : blue;
    height : 30px;
    width : 100px;
    margin-top : 20px;
}

    <div class="a"></div>
    <div class="b"></div>

(cursor over the red box)

如何让 child (绿框)固定在他的位置，即使他的 parent 向下移动？

谢谢大家

Answer 1

刚刚收到；

.a{
    background-color : red;
    height : 30px;
    width : 100px;
    overflow : hidden;
    position : absolute;
}

.b{
    background-color : green;
    height : 30px;
    width : 100px;
    margin-top : 50px;
    position : absolute;
}

.a:hover{
    display : block;
    background-color : blue;
    height : 30px;
    width : 100px;
    margin-top : 20px;
}

    <div class="a"></div>
    <div class="b"></div>