css3 дочерний модифицирующий родитель

Question

css3 дочерний модифицирующий родитель

0

Я пытаюсь сделать меню с радиальной тенью. Может кто-нибудь объяснить, почему родительский изменяется, когда все CSS указывается на дочерние элементы. Кажется, я не понимаю, что происходит.

Здесь скрипка

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

blaster 21 март 2014, в 19:14

Источник

1

Можете ли вы сказать, какой выход вы ищете?
Mohammad Areeb Siddiqui 21 март 2014, в 17:24
0

Я хочу, чтобы только дочерний элемент имел тень: before и: after, когда парил. Но кажется, что родитель получает эффект тени.
blaster 21 март 2014, в 17:27

Теги:

html

css3

web

1 ответ

Ещё вопросы

Можете ли вы сказать, какой выход вы ищете?
Я хочу, чтобы только дочерний элемент имел тень: before и: after, когда парил. Но кажется, что родитель получает эффект тени.

vals · Accepted Answer · 2014-03-21T14-43-00.000Z

Вы создаете псевдоэлементы, которые принимают размеры первого позиционированного родительского элемента. Это не базовый элемент псевдоэлемента, а родительский элемент.

Просто добавь

.m {
    position: relative;
}

и все будет хорошо