JQuery sur le vol stationnaire ne fonctionne pas et fonctionne immédiatement après le chargement page

Question

Je voulais changer la couleur des éléments en survolant, mais quand je cours la page, il déclenche instantanément ces fonctions, est-il possible de l'empêcher de le faire? Il peut être vu lors du rechargement de pages.

https://jsfiddle.net/9ae0ez2y/

function colorIn(primary){ 
    $("header").css("background-color", primary); 
    $(".button").css("background-color", primary); 
} 

function colorOut(secondary){ 
    $("header").css("background-color", secondary); 
    $(".button").css("background-color", secondary); 
} 
$("#variables").hover(colorIn("#ffffff"), colorOut("#111111")); 

Answer 1

Au lieu de passer les fonctions, vous les appelez dans le hover, vous devriez faire quelque chose comme ça,

$("#variables").hover(colorIn.bind(null, "#ffffff"), colorOut.bind(null, "#111111")); 

Answer 2

Changer votre déclaration de vol stationnaire à:

$("#variables").hover(function() { 
    colorIn("#ffffff") 
}, function() { 
    colorOut("#111111") 
}) 

jsFiddle example

La façon dont vous écrivez vous appelez les fonctions immédiatement