2

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/

0

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

1
  • 1
    Thank you for the fast answer Dave, I ended up adding the JS in a different file as you suggested first. I knew I could do this but I did not investigate it yet, I was trying to write all in functions.php and I did not understand why I could not.... Very interesting trick for adding the styles inline, unfortunately I could not make it work but I will study more about it! Apr 9 at 17:30
0

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.....

1
  • Thank you for the suggestion Trisha, in my case I wanted to style it very specifically so it would have been extra work to make it only with CSS tooltips, but I will keep the trick in mind Apr 9 at 17:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.