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

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 (

<!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 >
        <div  style="background-color: var(--red);"></div>
        <div  style="background-color: var(--blue);"></div>
        <div  style="background-color: var(--green);"></div>
        <div  style="background-color: var(--black);"></div>
        <div  style="background-color: var(--pink);"></div>
        <div  style="background-color: var(--brown);"></div>
    </div>
</body>
</html>

CodePudding user response：

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

CodePudding user response：

So I've ALMOST got it but the fade on mouseout is giving me trouble. As stated, you can't transition background-image and linear-gradients can't be transitioned BUT they can be animated! So here's the workaround I came up with:

I put all of your content into a container for positioning and alignment purposes. Then, I separated the child buttons from everything else and put your starter background into a container behind everything. From there, I established a class for each type of gradient change that you wanted (since you only wanted to change the top color) and assigned ids to each child that I could call in javascript to add the class as well as the gradient animation. I also added a slightly different shade of blue so you could actually see that transition occur otherwise that button wouldn't appear to do much. So it works except that when you mouse out the animation isn't smooth. That's the part I'm still trying to work through. I've tried adding another class (gradientOut) but it doesn't seem to be doing what I want just yet.

let gradientOverlay = document.getElementById('gradientOverlay');
let gradient = document.getElementsByClassName('gradient');

let red = document.getElementById('red');
red.addEventListener("mouseenter", function(event) {
  gradientOverlay.classList.add('redG');
  gradientOverlay.classList.add('gradient');
});
red.addEventListener("mouseleave", function(event) {
  gradientOverlay.classList.remove('redG');
  gradientOverlay.classList.remove('gradient');
});

let blue = document.getElementById('blue');
blue.addEventListener("mouseenter", function(event) {
  gradientOverlay.classList.add('blueG');
  gradientOverlay.classList.add('gradient');
});
blue.addEventListener("mouseleave", function(event) {
  gradientOverlay.classList.remove('blueG');
  gradientOverlay.classList.remove('gradient');
});

let green = document.getElementById('green');
green.addEventListener("mouseenter", function(event) {
  gradientOverlay.classList.add('greenG');
  gradientOverlay.classList.add('gradient');
});
green.addEventListener("mouseleave", function(event) {
  gradientOverlay.classList.remove('greenG');
  gradientOverlay.classList.remove('gradient');
});

let black = document.getElementById('black');
black.addEventListener("mouseenter", function(event) {
  gradientOverlay.classList.add('blackG');
  gradientOverlay.classList.add('gradient');
});
black.addEventListener("mouseleave", function(event) {
  gradientOverlay.classList.remove('blackG');
  gradientOverlay.classList.remove('gradient');
});

let pink = document.getElementById('pink');
pink.addEventListener("mouseenter", function(event) {
  gradientOverlay.classList.add('pinkG');
  gradientOverlay.classList.add('gradient');
});
pink.addEventListener("mouseleave", function(event) {
  gradientOverlay.classList.remove('pinkG');
  gradientOverlay.classList.remove('gradient');
});

let brown = document.getElementById('brown');
brown.addEventListener("mouseenter", function(event) {
  gradientOverlay.classList.add('brownG');
  gradientOverlay.classList.add('gradient');
});
brown.addEventListener("mouseleave", function(event) {
  gradientOverlay.classList.remove('brownG');
  gradientOverlay.classList.remove('gradient');
});

:root {
  --red: #ff5656f8;
  --blue: #00ffea;
  --green: #6cff7f;
  --black: #353535;
  --pink: #ff2fff;
  --brown: #8b0000;
  --backgroundTopBlue: #0cf0de;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  height: 100vh;
}

.mainContainer {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  padding: 0px;
  margin: 0 auto;
  z-index: 2;
  width: 940px;
  height: 240px;
}

.main {
  display: flex;
  background-image: linear-gradient(to bottom, var(--backgroundTopBlue), blue);
  padding: 0px;
  margin: 0 auto;
  border-radius: 10px;
  z-index: 0;
  width: 940px;
  height: 240px;
}

.childContainer {
  display: flex;
  align-items: center;
  justify-items: center;
  padding: 0px;
  margin: 0 auto;
  z-index: 1;
}

.gradientOverlay {
  display: block;
  position: absolute;
  margin: 0 auto;
  width: 940px;
  height: 240px;
  background-image: linear-gradient(to bottom, var(--backgroundTopBlue), blue);
  border-radius: 10px;
  opacity: 0;
  z-index: 0;
}

.child {
  width: 100px;
  height: 100px;
  margin: 20px;
  z-index: 2;
}

#red {
  background-color: var(--red);
}

#blue {
  background-color: var(--blue);
}

#green {
  background-color: var(--green);
}

#black {
  background-color: var(--black);
}

#pink {
  background-color: var(--pink);
}

#brown {
  background-color: var(--brown);
}

.redG {
  display: flex;
  background-image: linear-gradient(to bottom, var(--red), blue);
  padding: 0px;
  opacity: 0;
  border-radius: 10px;
  z-index: 1;
}

.blueG {
  display: flex;
  background-image: linear-gradient(to bottom, var(--blue), blue);
  padding: 0px;
  opacity: 0;
  border-radius: 10px;
  z-index: 1;
}

.greenG {
  display: flex;
  background-image: linear-gradient(to bottom, var(--green), blue);
  padding: 0px;
  opacity: 0;
  border-radius: 10px;
  z-index: 1;
}

.blackG {
  display: flex;
  background-image: linear-gradient(to bottom, var(--black), blue);
  padding: 0px;
  opacity: 0;
  border-radius: 10px;
  z-index: 1;
}

.pinkG {
  display: flex;
  background-image: linear-gradient(to bottom, var(--pink), blue);
  padding: 0px;
  opacity: 0;
  border-radius: 10px;
  z-index: 1;
}

.brownG {
  display: flex;
  background-image: linear-gradient(to bottom, var(--brown), blue);
  padding: 0px;
  opacity: 0;
  border-radius: 10px;
  z-index: 1;
}

.gradient {
  animation: gradient 1s ease-in forwards;
}

@keyframes gradient {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.gradientOut {
  animation: gradientOut 1s ease-out forwards;
}

@keyframes gradientOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<!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">
</head>

<body>
  <div >
    <div  id="main">
      <div  id="gradientOverlay">
      </div>
      <div >
        <div  id="red"></div>
        <div  id="blue"></div>
        <div  id="green"></div>
        <div  id="black"></div>
        <div  id="pink"></div>
        <div  id="brown"></div>
      </div>
    </div>
  </div>
</body>

</html>

CodePudding user response：

I created my own answer