jQuery Hintergrund Farbverläufe auf Schwebeflug

Question

Ich habe derzeit eine ungeordnete Liste, die beim Überfahren jedes Listenelements den übergeordneten Hintergrund Farbverlauf ändert. Das war einfach genug, aber mein Problem ist, dass ich die Farbverläufe im Schwebebalken zusammen ausblenden kann, um eine sofortige Farbänderung zu verhindern.

fand ich dieses Beispiel, aber ich kann keine Dokumentation zu finden scheinen, wie die Farbänderung auf schweben triggern: https://codepen.io/quasimondo/pen/lDdrF

Jedwedes Hilfe würde geschätzt.

JS

/* Variables */ 
var defaultGradient = '120deg, #fa709a 0%, #fe9e40 100%', gradients = ['120deg, #908bbf 0%, #dc93a0 100%', '120deg, #6c6860 0%, #525252 100%', '120deg, #fa709a 0%, #f9e060 100%', '120deg, #428f94 0%, #93d081 100%', '120deg, #6d5d62 0%, #737272 100%']; 

/* Default Gradient */ 
$('ul').css({'background': 'linear-gradient('+defaultGradient+')'}); 

$('ul > li').on('mouseenter', function() { 

    /* li Index */ 
    var index = $('ul > li').index(this); 

    /* Gradient CSS */ 
    $('ul > li').parent().css({'background': 'linear-gradient('+gradients[index]+')'}); 

    /* Update Default Gradient */ 
    defaultGradient = gradients[index]; 

}).on('mouseleave', function() { 

    /* Index */ 
    var index = $('ul > li').index(this); 

    /* Updated Default Gradient */ 
    $('ul > li').parent().css({'background': 'linear-gradient('+defaultGradient+')'}); 

}); 

HTML

<ul> 
    <li>Zero</li> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
    <li>Four</li> 
</ul> 

SCSS

ul { 
    margin:0; 
    padding:0; 
    width:100vw; 
    height:100vh; 
    display:block; 
    li { 
    margin:0; 
    padding:0; 
    width:100vw; 
    height:20vh; 
    display:block; 
    } 
} 

Answer 1

Sie nicht JS brauchen dies zu erreichen.

HTML

<a href="#" id="blue">Blue</a><br> 
<a href="#" id="yellow">Yellow</a><br> 
<a href="#" id="green">Green</a> 
<div id="gradient"></div> 

CSS

body { 
    padding: 0; 
    margin: 0; 
} 

#gradient { 
    width: 100%; 
    height: 800px; 
    padding: 0; 
    margin: 0; 
    background-color: deeppink; 
    background-image: linear-gradient(white, rgba(255,255,255,0)); 
    transition: background-color 1s; 
} 

#blue:hover ~ #gradient { 
    background-color: blue; 
} 

#yellow:hover ~ #gradient { 
    background-color: yellow; 
} 

#green:hover ~ #gradient { 
    background-color: red; 
} 

FIDDLE