enqueue hover function

时间：2021-03-26 作者：Guillermo Bustillo

我正在尝试将悬停函数排入我的函数中。我的孩子主题的php，这样当鼠标悬停在标题上时，带有文本的div将可见。我使用的代码如下：

<?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
}

它在我的小提琴中工作，所以我猜问题出在我的php中，我对它相当陌生。。。任何帮助或线索都将不胜感激！

小提琴链接：https://jsfiddle.net/rvoLc3ph/

2 个回复

最合适的回答,由SO网友:Dave Romsey 整理而成

您可以将JS添加到子主题中的文件中/js/example.js, 然后按如下方式排队：

//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 );
}

或者，您可以使用以下方法在线添加样式：

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 );
}

请参阅@birgire获取此技巧的来源wp_add_inline_script without dependency

SO网友:Trisha

虽然你可以用JS来实现这一点，但请记住，它在手机上是粗略的，并不总是有效的。您可以考虑改用CSS“tooltips”类型的方法，这几乎就是直接的CSS，带有悬停时显示的隐藏DIV。

您可以使用发电机，其中一个在此处：

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

如果你发布更多关于如何在DIV中创建标题和文本的信息，我也可以建议一些简单的方法来动态制作它们。。。。。

标签： php hooks wp-enqueue-script 小码农

主题的函数.php文件的大小重要吗？

我为我的网站创建了一个自定义主题，我正在更新主题以与古腾堡合作。到目前为止，主题函数的文件大小。php文件当前为1.9MBs。我的主题函数的文件大小。php文件问题？如果是这样，那么如何创建自定义插件？

小码农CODE

enqueue hover function

相关推荐

主题的函数.php文件的大小重要吗？