在CSS中执行悬停时，如何使子元素不填充其父元素？

Question

这是一个简单的例子：

＆＃13;

＆＃13;

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

＆＃13;

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

(cursor over the red box)

＆＃13;

＆＃13;

＆＃13;

即使父母向下移动，如何让孩子（绿箱）固定在他的位置？

谢谢大家

Answer 1

刚刚得到它;

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;