@M1sty1
Занимаюсь версткой

Как сделать, чтобы при наведении на блок применялась анимация и на блок и на содержимое в нем?

Как сделать, чтобы при наведении на блок происходила анимация самого блока и его содержимого?
Пока что только получилось сделать так, что при наведении на блок (серый фон) увеличивается фон, а если навести на само украшение, то происходит анимация и на блоке, и на украшении
5f40c4bc50da0860642616.png
Код вот такой:
products_bg = document.querySelectorAll("#product-bg");
products = document.querySelectorAll("#product");

products_bg.forEach( (product1) =>
{
    products.forEach ( (product) =>
    {        
            product1.onmouseenter = () => 
            {
                
                product1.style.height ="257px";
                product1.style.transitionDuration ="0.5s"
                product1.style.marginBottom = "27px";
                
              
            }
        
            product1.onmouseleave = () =>
            {
               
                product1.style.height ="184px";
                product1.style.transitionDuration ="0.5s"
                product1.style.marginBottom = "68px"; 
              
            }
            product.onmouseenter = () => 
            {
                product.style.transitionDuration ="0.5s"
                product.style.transform = "scale(1.2)"
              
            }
        
            product.onmouseleave = () =>
            {
               
                product.style.transitionDuration ="0.7s"
                product.style.transform = "scale(1)"
              
            }
        
        
    })
})
  • Вопрос задан
  • 78 просмотров
Пригласить эксперта
Ответы на вопрос 1
fomenkogregory
@fomenkogregory
Юниор софтварный инженер
1) Такая анимация делается с помощью css.
2) используй селекторы, например так
container:hover item
При наведении на фон будут меняться стили у айтем внутри.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы