将鼠标悬停在其他元素上时更改元素的背景颜色（缓慢）

Question

当悬停在 .child 元素上时，我需要将 .main 线性渐变顶部颜色更改为 .child 元素颜色 但速度较慢（如 Spotify）

我创建了一个 Spotify 克隆 (https://spotify.dinujaya.me/)，但我不知道如何在将鼠标悬停在其他元素上时更改顶部颜色。

<!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>

Answer 1

您可以为您的 .main 添加一个新的 class，例如：

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

然后在您的代码中添加一个 jQuery 函数，这将更改 .main 背景或只是 add/remove 一个 class 与您的新背景颜色。例如：

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

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

Answer 2

所以我几乎明白了，但是 mouseout 的淡入淡出给我带来了麻烦。如前所述，您无法转换 background-image 并且 linear-gradients 无法转换，但它们可以动画化！所以这是我想出的解决方法：

为了定位和对齐，我将您的所有内容放入一个容器中。然后，我将 child 按钮与其他所有按钮分开，并将您的入门背景放入所有内容后面的容器中。从那里，我为你想要的每种类型的渐变变化建立了一个 class（因为你只想改变顶部颜色）并为我可以调用的每个 child 分配 ID javascript 添加 class 以及渐变动画。我还添加了稍微不同的蓝色阴影，这样您就可以真正看到发生了过渡，否则该按钮似乎不会做太多事情。所以它可以工作，除了当您将鼠标移开时动画不流畅。那是我仍在努力完成的部分。我试过添加另一个 class (gradientOut)，但它似乎还没有达到我想要的效果。

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 class="mainContainer">
    <div class="main" id="main">
      <div class="gradientOverlay" id="gradientOverlay">
      </div>
      <div class="childContainer">
        <div class="child" id="red"></div>
        <div class="child" id="blue"></div>
        <div class="child" id="green"></div>
        <div class="child" id="black"></div>
        <div class="child" id="pink"></div>
        <div class="child" id="brown"></div>
      </div>
    </div>
  </div>
</body>

</html>

Answer 3

我创建了自己的答案

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)'
})

将鼠标悬停在其他元素上时更改元素的背景颜色（缓慢）

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

html

javascript

css

jquery