1

i wanted to change element color by hovering, but when i run the page, it instantly triggers these functions, is there a way to stop it from doing so? It can be seen when reloading 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"));
j08691
  • 204,283
  • 31
  • 260
  • 272
Dassin
  • 107
  • 1
  • 6
  • 1
    Just want to note that your colorIn and colorOut functions are identical. You can use the same function in both places with a different variable. – Jon Uleis Dec 07 '16 at 21:13

2 Answers2

4

Change your hover statement to:

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

jsFiddle example

The way you write it you're calling the functions immediately

j08691
  • 204,283
  • 31
  • 260
  • 272
0

Instead of passing the functions, you are calling them in the hover, you should do something like this,

$("#variables").hover(colorIn.bind(null, "#ffffff"), colorOut.bind(null, "#111111"));
Anthony C
  • 2,117
  • 2
  • 15
  • 26