'Change background color of an element when hover on other element (slowly)

I need to change .main linear gradient top color when hovering over .child elements to the .child element color but slowly (like Spotify)

I created a Spotify clone (https://spotify.dinujaya.me/) but I can't figure out how to change top color when hovering over other elements.

enter image description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root{
            --red: #ff5656f8;
            --blue: #00ffea;
            --green: #6cff7f;
            --black: #353535;
            --pink: #ff2fff;
            --brown: #8b0000;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
            height: 100vh;
        }
        .main{
            display: flex;
            background-image: linear-gradient(to bottom, var(--blue), blue);
            padding: 50px;
            border-radius: 10px;
        }
        .child{
            width: 100px;
            height: 100px;
            margin: 20px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="child" style="background-color: var(--red);"></div>
        <div class="child" style="background-color: var(--blue);"></div>
        <div class="child" style="background-color: var(--green);"></div>
        <div class="child" style="background-color: var(--black);"></div>
        <div class="child" style="background-color: var(--pink);"></div>
        <div class="child" style="background-color: var(--brown);"></div>
    </div>
</body>
</html>
javascripthtmljquerycss


Solution 1:[1]

you can do this by adding a new class for your .main, for example:

.red{
  background:red; /* background color you need */
  transition: background 1.0s ease-in; /*transition speed */ 
}

and then add a jQuery function to your code, that will change .main background or just add/remove a class with your new bg color. For example:

$(".child").mouseover(function(){
  $('.main').addClass("red");
});

$(".child").mouseout(function(){
  $('.main').removeClass("red");
});

Solution 2:[2]

I created my own answer ??

css

:root{
    --red: #ff5656f8;
    --blue: #00ffea;
    --green: #6cff7f;
    --black: #353535;
    --pink: #ff2fff;
    --brown: #8b0000;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    height: 100vh;
}
.bg{
    background-color: rgb(0, 55, 92);
    border-radius: 10px;
    overflow: hidden;
    transition: background 0.5s linear;
}
.main{
    display: flex;
    background-image: linear-gradient(to bottom, transparent, blue);
    padding: 50px;

}
.child{
    width: 100px;
    height: 100px;
    margin: 20px;
    background-color: green;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="bg" id="background">
        <div class="main">
            <div class="child" id="child_1" style="background-color: var(--red);"></div>
            <div class="child" id="child_2" style="background-color: var(--blue);"></div>
            <div class="child" id="child_3" style="background-color: var(--green);"></div>
            <div class="child" id="child_4" style="background-color: var(--black);"></div>
            <div class="child" id="child_5" style="background-color: var(--pink);"></div>
            <div class="child" id="child_6" style="background-color: var(--brown);"></div>
        </div>
    </div>

    
</body>
</html>

javaScript

let background = document.getElementById('background');

document.getElementById('child_1').addEventListener('mouseover', function () {
    background.style.backgroundColor = 'var(--red)'
})
document.getElementById('child_1').addEventListener('mouseout', function () {
    background.style.backgroundColor = 'rgb(0, 55, 92)'
})

document.getElementById('child_2').addEventListener('mouseover', function () {
    background.style.backgroundColor = 'var(--blue)'
})
document.getElementById('child_2').addEventListener('mouseout', function () {
    background.style.backgroundColor = 'rgb(0, 55, 92)'
})

document.getElementById('child_3').addEventListener('mouseover', function () {
    background.style.backgroundColor = 'var(--green)'
})
document.getElementById('child_3').addEventListener('mouseout', function () {
    background.style.backgroundColor = 'rgb(0, 55, 92)'
})

document.getElementById('child_4').addEventListener('mouseover', function () {
    background.style.backgroundColor = 'var(--black)'
})
document.getElementById('child_4').addEventListener('mouseout', function () {
    background.style.backgroundColor = 'rgb(0, 55, 92)'
})

document.getElementById('child_5').addEventListener('mouseover', function () {
    background.style.backgroundColor = 'var(--pink)'
})
document.getElementById('child_5').addEventListener('mouseout', function () {
    background.style.backgroundColor = 'rgb(0, 55, 92)'
})

document.getElementById('child_6').addEventListener('mouseover', function () {
    background.style.backgroundColor = 'var(--brown)'
})
document.getElementById('child_6').addEventListener('mouseout', function () {
    background.style.backgroundColor = 'rgb(0, 55, 92)'
})

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 katebao
Solution 2 Dinujaya Sandaruwan

Related Questions