html - css3子修改父

Question

我正在尝试制作一个带有径向阴影的菜单。有人可以解释为什么当所有 CSS 都指向子元素时父元素会发生变化。我似乎无法理解发生了什么。

Here's the fiddle

HTML:

<div id="mny1" class="mny" >
    <div class="m" >1</div>
    <div class="m" >2</div>
    <div class="m" >3</div>
    <div class="m" >4</div>
</div>

CSS:

.mny {
    width:336px; 
    height:17px;
    position:absolute; 
    margin-left:50px; 
    margin-top:50px; 
    z-index:10;
}
.m {
    width:84px;
    height:17px;
    text-align:center;    
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    -o-transition:.2s ease-in-out;
    transition:.2s ease-in-out;
    cursor:pointer;
    float:left;
}
.mny > div:before,
.mny > div:after {
    position: absolute;
    content: '';
    left: 0;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
    height: 5px;
    opacity: 0;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: opacity;
    transition-property: opacity;
}

.mny > div:before {
    bottom: 100%;
    background: -webkit-radial-gradient(50% 150%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
    background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}

.mny > div:after {
    top: 100%;
    background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
    background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}

.mny > div:hover:before,
.mny > div:hover:after {
    opacity: 1;
}

Answer 1

您正在设置伪元素的样式，它们采用位于第一个 位置的父元素的尺寸。这不是伪元素的基元素，而是它的父元素。

只需添加

.m {
    position: relative;
}

会好的