Question

我有一个运行WooCommerce实例的网站。在“产品存档”页面上，当鼠标离开产品并且叠加层消失时，会出现明显的延迟。我想把这个延迟减少到大约0.1s

网址：http://economistfoundation.org/the-library/

我已经尝试查看主题和woocommerce插件中的各种CSS文件，看看是否存在0.5s或类似的“过渡”控制.thumb-overlay，但找不到任何相似的内容

我想知道这个设置是否可以在Javascript中，但是有很多文件可以存储它我不知所措。

我使用Firebug检查器查看了页面，并且.thumb-overlay具有在'display：block'和'display：none'之间移动的样式属性，并且当您将鼠标移到'不透明度的属性上时'从0到1快速计数。

有谁知道延迟值可能存储在哪里？

Answer 1

它位于<{>第19行

的wp-content/themes/agent/woocommerce/woocommerce-custom.js文件中。

    jQuery(document).on( 'mouseenter', '.products .product', function() {
        jQuery(this).find('.thumb-overlay').stop(true, true).fadeIn();
    });
    jQuery(document).on( 'mouseleave', '.products .product', function() {
        jQuery(this).find('.thumb-overlay').stop(true, true).fadeOut();
    });

<强> EDITED

子主题仅覆盖主题目录中的文件（如header.php），这些文件使用get_template_part或get_header等函数调用。

向WordPress添加脚本的正确方法是使用wp_enqueue_script。如果您的父主题使用此主题，则可以使用wp_dequeue_script覆盖JS文件并将其自身排入。

像这样...

<?php
add_action( 'wp_enqueue_scripts', 'so28089698_script_fix' );
function so28089698_script_fix()
{
    wp_dequeue_script( 'parent_theme_script_handle' );
    wp_enqueue_script( 'child_theme_script_handle', get_stylesheet_directory_uri() . '/scripts/yourjs.js', array( 'jquery' ) );
}

如果父主题没有使用wp_enqueue_script，它可能会挂钩到wp_head（或wp_footer）以回显那里的脚本。因此，您可以使用remove_action删除那些回显脚本的函数，然后将您自己的脚本排入队列。

如果脚本硬编码到模板文件中，您只需要在没有脚本标记的情况下替换子主题中的模板文件。

如果他们使用了使用get_stylesheet_directory_uri的wp_enqueue_script调用，那么您就不应该做任何事情。由于这不会发生，你只需要四处寻找，看看主题作者做了什么。

鼠标悬停时叠加的延迟消失

1 个答案: