Как написать скрипт для ховера елементов на JS или jquery?

Question

[DanilChekh]

Подскажите,есть контейнер блок work, а в нем два блока елемента,один фото, блок photo, второй блок above,описание фотографии. Как мне сделать так, чтобы при наведении на блок контайнер work, фотография затемнялась, а текст в блоке описании менял стиль?
Силами css как я понял это сделать невозможно из-за селекторов, с js не силен или jquery,но по логике такое набрасал,скажите в чем ошибка пожалуйста, и если можно на jquery ,как я понял ,там по сравнению с js упрощен синтаксис.

var work = document.getElementById('work');
 var above=document.getElementById('above');
  var photo=document.getElementById('photo');
 work.onmouseover = function() {
    above.style.background-color = 'black';
   above.style.color='white';
  photo.style.background='rgba(0,0,0,0.7)';
  };

Answer 1

[DanilChekh]

просто один блок, я его выберу селектором,добавлю ховер и плавно сделаю через transition, вопрос не в этом, а в том чтобы при наведении на контейнер срабатывали две разные анимации дочерних блоков, не уверен что CSS средствами такое возможно

Comments

[Антон Спирин]

1. Вы можете комментировать ответ нажав "комментировать".
2. Как человек написавший десятки подобных реализаций, говорю вам, что можно и нужно такие вещи реализовывать на чистом css.
Примеры:
https://codepen.io/vincebrown/pen/bNNpmY?q=hover+t...
https://codepen.io/inf3cti0n95/pen/vyEvgy?q=materi...

[DanilChekh]

Антон Спирин, понял спасибо за данные примеры