Add a Time Requirement to Mouse In/Out Hover Code

Ask the community
,
1

I am currently using the following code below to make a container box hidden on load (#tester) show when you hover over a box38 and then hide again when you move your mouse away from box38. I want to add a time requirement to both the mouseIn and mouseOut functions. You should need to hover over box38 for 2 seconds before #tester will show, and if you move your mouse off before then #tester will not show. Also, you should need to keep your mouse off of box38 for 3 seconds before #tester will hide, and if you move off and then back onto box38 before the 3 seconds, it should remain shown.

Please let me know what should be added, thanks!

$w.onReady(function () {

});

export function box38_mouseIn(event) {
    $w("#tester").show();
}

export function box38_mouseOut(event) {
    $w("#tester").hide();
}
2 
let isHoveredOver = false;
let hoverCounter = 0;
let hoverOutCounter = 0;
export function box38_mouseIn(event) {
    isHoveredOver = true;
    hoverCounter++;
    const counter = hoverCounter;
    setTimout(() => {
        if(isHoveredOver && counter === hoverCounter){
            $w("#tester").show();
        }
    }, 2000);//2000 milliseconds
}

export function box38_mouseOut(event) {
    isHoveredOver = false;
    hoverOutCounter ++;
    const counter = hoverOutCounter ;
    setTimout(() => {
        if(!isHoveredOver && counter === hoverOutCounter){
            $w("#tester").hide();
        }
    }, 2000);
}
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);
}
4

Revisiting this…