在CSS中执行悬停时，如何使child元素不填充他的parent？

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>

在CSS中执行悬停时，如何使child元素不填充他的parent？

How to make child element do not fill his parent when hover is performed in CSS?

html

css

compass-sass