將滑鼠懸停在其他元素上時更改元素的背景顏色（緩慢）-有解無憂

將滑鼠懸停在.child元素上時，我需要將 .main 線性漸變頂部顏色更改為.child元素顏色，但速度較慢（如 Spotify）

我創建了一個 Spotify 克隆（將滑鼠懸停在其他元素上時更改元素的背景顏色（緩慢）

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

uj5u.com熱心網友回復：

你可以通過為你的添加一個新類來做到這一點.main，例如：

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

然后在您的代碼中添加一個 jQuery 函式，這將更改 .main 背景或僅添加/洗掉具有新 bg 顏色的類。例如：

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

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

uj5u.com熱心網友回復：

所以我幾乎明白了，但是滑鼠移出時的淡出給我帶來了麻煩。如前所述，您不能轉換背景影像，不能轉換線性漸變，但它們可以影片！所以這是我想出的解決方法：

我將您的所有內容放入一個容器中，用于定位和對齊目的。然后，我將子按鈕與其他所有按鈕分開，并將您的啟動器背景放入所有內容后面的容器中。從那里，我為您想要的每種型別的漸變更改建立了一個類（因為您只想更改頂部顏色）并為每個孩子分配了 id，我可以在 javascript 中呼叫以添加類以及漸變影片。我還添加了稍微不同的藍色陰影，因此您實際上可以看到發生了過渡，否則該按鈕似乎不會做太多事情。所以它可以作業，只是當你滑鼠移出時影片不流暢。那是我仍在努力解決的部分。我嘗試添加另一個類（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>

uj5u.com熱心網友回復：

我創建了自己的答案????

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>

腳本

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/479687.html

標籤：javascript html jQuery css

上一篇：HTML，點擊事件，如何獲取按鈕文本

下一篇：如何將.nextElementSibling應用于下拉選單的下一項