Как иметь эффект зависания css влияет на дочерние элементы по-разному?

Question

У меня есть прямоугольный div с 2 компонентами в нем. Элемент изображения и разделитель текста под этим. Я хотел бы сделать эффект зависания во всем div, который влияет на два дочерних компонента по-разному.

Например, я хотел бы, чтобы изображение имело другую яркость, а текст имел другой цвет фона и текста (но без изменений).

Вот скрипка скелета (основной div, содержащий 2 дочерних div), но css не то, что я хочу. https://jsfiddle.net/jhbf5c9n/

HTML:

<div class="main-container"> 
<!-- this div should have decrease in brightness --> 
    <div class="effect1"> 
    <img src="http://placehold.it/200x100"> 
    </div> 
<!-- this div should have constant 100% brightness, but background color and font color should change --> 
    <div class="effect2"> 
    <p>This div should change background</p> 
    <p>And font color</p> 
    </div> 
</div> 

CSS:

p{ 
    margin: 0; 
} 
div.main-container { 
    height: 200px; 
    width: 200px; 
} 
div.effect1 { 
    width: 200px; 
    height: 100px; 
    background-color: blue; 
} 
div.effect2 { 
    width: 200px; 
    height: 100px; 
    background-color: green; 
} 
div.main-container:hover { 
    -webkit-filter: brightness(50%); 
    background-color: blue; 
    color: white; 
} 

Основная цель состоит в том, чтобы иметь один парения событие триггера CSS по-разному для различных дочерних элементов. Благодаря!

Answer 1

Если вы хотите сделать некоторый эффект при наведении на DIV, который меняет что-то в своем ребенке, то вы могли бы сделать это

.main-container:hover > .effect1 > img { 
     -webkit-filter: brightness(50%); 
} 

.main-container:hover > .effect2 > p{ 
    background-color: blue; 
    color: white; 
} 

Это изменит яркость изображения в EFFECT1 и тексте в Effect2 на одном парении. Надеюсь, это ваш ответ

Answer 2

В вашей скрипке вы можете использовать следующий код, чтобы получить желаемый результат:

div.main-container:hover .effect1 { 
    -webkit-filter: brightness(10%); 
} 

Simlarly вы можете сделать для другого ребенка также.