Add a Time Requirement to Mouse In/Out Hover Code

Ask the community
,
3

Thanks for the response! I am using this code to replicate the “More” button that is part of my site’s horizontal menu. I have modified the code as shown below to make this work, adding the #tester element itself and the various page buttons. However, there are still 2 final things I hope to add if possible:

First, when you click on any of the 4 page buttons, that button’s text color should change to #006400 from its original color of #003200, and stay that color even after you click the button and a re directed to a different site page. The button’s text color should only go back to its original color when one goes to another page on the site. This acts as an indicator of what page a visitor is on.

Second, when you click on any of the 4 page buttons to go to a page, the #tester element should stay shown for 2000 milliseconds if the mouse stays on #tester while you are being directed to the new page, and then hide after. Currently, #tester disappears once you are directed to a new page.

Thanks again for the help!

let isHoveredOver = false;
let hoverCounter = 0;
let hoverOutCounter = 0;
export function box39_mouseIn(event) {
    isHoveredOver = true;
    hoverCounter++;
    const counter = hoverCounter;
    setTimeout(() => {
        if(isHoveredOver && counter === hoverCounter){
            $w("#tester").show();
        }
    }, 100);
}

export function box39_mouseOut(event) {
    isHoveredOver = false;
    hoverOutCounter ++;
    const counter = hoverOutCounter ;
    setTimeout(() => {
        if(!isHoveredOver && counter === hoverOutCounter){
            $w("#tester").hide();
        }
    }, 1000);
}

export function tester_mouseIn(event) {
    isHoveredOver = true;
    hoverCounter++;
    const counter = hoverCounter;
    setTimeout(() => {
        if(isHoveredOver && counter === hoverCounter){
            $w("#tester").show();
        }
    }, 100);
}

export function tester_mouseOut(event) {
    isHoveredOver = false;
    hoverOutCounter ++;
    const counter = hoverOutCounter ;
    setTimeout(() => {
        if(!isHoveredOver && counter === hoverOutCounter){
            $w("#tester").hide();
        }
    }, 1000);
}

export function button24_mouseIn(event) {
    isHoveredOver = true;
    hoverCounter++;
    const counter = hoverCounter;
    setTimeout(() => {
        if(isHoveredOver && counter === hoverCounter){
            $w("#tester").show();
        }
    }, 100);
}

export function button24_mouseOut(event) {
    isHoveredOver = false;
    hoverOutCounter ++;
    const counter = hoverOutCounter ;
    setTimeout(() => {
        if(!isHoveredOver && counter === hoverOutCounter){
            $w("#tester").hide();
        }
    }, 1000);
}

export function button23_mouseIn(event) {
    isHoveredOver = true;
    hoverCounter++;
    const counter = hoverCounter;
    setTimeout(() => {
        if(isHoveredOver && counter === hoverCounter){
            $w("#tester").show();
        }
    }, 100);
}

export function button23_mouseOut(event) {
    isHoveredOver = false;
    hoverOutCounter ++;
    const counter = hoverOutCounter ;
    setTimeout(() => {
        if(!isHoveredOver && counter === hoverOutCounter){
            $w("#tester").hide();
        }
    }, 1000);
}

export function button21_mouseIn(event) {
    isHoveredOver = true;
    hoverCounter++;
    const counter = hoverCounter;
    setTimeout(() => {
        if(isHoveredOver && counter === hoverCounter){
            $w("#tester").show();
        }
    }, 100);
}

export function button21_mouseOut(event) {
    isHoveredOver = false;
    hoverOutCounter ++;
    const counter = hoverOutCounter ;
    setTimeout(() => {
        if(!isHoveredOver && counter === hoverOutCounter){
            $w("#tester").hide();
        }
    }, 1000);
}

export function button22_mouseIn(event) {
    isHoveredOver = true;
    hoverCounter++;
    const counter = hoverCounter;
    setTimeout(() => {
        if(isHoveredOver && counter === hoverCounter){
            $w("#tester").show();
        }
    }, 100);
}

export function button22_mouseOut(event) {
    isHoveredOver = false;
    hoverOutCounter ++;
    const counter = hoverOutCounter ;
    setTimeout(() => {
        if(!isHoveredOver && counter === hoverOutCounter){
            $w("#tester").hide();
        }
    }, 1000);
}