enqueue hover function

I am trying to enqueue a hover function in my functios.php of my child theme, so that when hovering over a title, a div with a text will be visible. The code I am using is this:

<?php
add_action( 'wp_enqueue_scripts', 'home_game', 20);  

function home_game(){
?>
<script>
    let title1 = document.getElementById("home-title1");
    title1.addEventListener('mouseover', mouseOver);
    title1.addEventListener('mouseout', mouseOut);
    
    function mouseOver(){
    document.getElementById('title-box').style.display = 'none';
    document.getElementById('home-box1').style.display = 'block';
}
    function mouseOut(){
    document.getElementById('title-box').style.display = 'block'; 
    document.getElementById('home-box1').style.display = 'none';
}
    
</script>

<?php
}

It works in my fiddle so I guess the problem is in my php, I am fairly new with it… Any help or clue will be very appreciated!

fiddle link:
https://jsfiddle.net/rvoLc3ph/

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You can add your JS to a file in your child theme /js/example.js, then enqueue it like this:

//add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
function wpdocs_theme_name_scripts() {
    wp_enqueue_script( 'script-name', get_stylesheet_directory_uri() . '/js/example.js', [], '1.0.0', true );
}

Alternatively, you can add the styles inline using this:

add_action( 'wp_enqueue_scripts', 'wpse_home_game', 20 );
function wpse_home_game() {
    wp_register_script( 'home-game', false );
    wp_enqueue_script( 'home-game' );

    $script = "

    let title1 = document.getElementById('home-title1');

    // Check if title1 was present before wiring up event listeners.
    if ( null !== title1 )  {
        title1.addEventListener('mouseover', mouseOver);
        title1.addEventListener('mouseout', mouseOut);
    }

    function mouseOver(){
        document.getElementById('title-box').style.display = 'none';
        document.getElementById('home-box1').style.display = 'block';
    }

    function mouseOut(){
        document.getElementById('title-box').style.display = 'block';
        document.getElementById('home-box1').style.display = 'none';
    }

    ";

    wp_add_inline_script( 'home-game', $script );
}

See for source of this trick from @birgire wp_add_inline_script without dependency

Method 2

While you can do this with JS, remember that it’s sketchy on mobile phones and doesn’t always work. You might consider instead using a CSS ‘tooltips’ type of approach, which is pretty much just straight CSS with a hidden DIV that shows on hover.

You can play around with the generators, one of which is here:

https://doodlenerd.com/css-element/tooltip-generator

If you post more about how you’re creating the title and the text within the DIV I may be able to suggest easy ways of crafting them on the fly too…..

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0