Question

the console is not detecting overExpand as true at the end. Am I doing something wrong?

var transLayer = $('.transparentBg');
var overExpand = false;
var overUl = false;


$(transLayer).hide();
console.log('transLayer hide'); // this is being logged

$('#header .nav .wrapper > ul > li.expand').hover(function(){ 
    overExpand = true;  
    console.log(overExpand);// this works = true    
}, function(){ 
    overUl = true;
});

console.log(overExpand); // this shows false

Answer 1

The value is false because the code that sets the value to true is never run.

You have overExpand = true inside of a hover event handler. That code won’t be run until the event is fired. The console.log(overExpand) will surely execute before the event is fired therefore overExpand will still be false.

If you want to see the value after it is set to true, you should log from inside the handler:

$('header .nav .wrapper > ul > li.expand').hover(function(){
    overExpand = true;
    console.log(overExpand);
}, function(){
    overUl = true;
});

If you’re really expecting it to be true the way it is currently written, you’ll have to restructure the code a good deal.