鼠标悬停时覆盖消失的延迟

Question

我有一个运行 WooCommerce 实例的网站。在产品存档页面上，当鼠标离开产品并且覆盖消失时，会出现明显的延迟。我想将延迟减少到大约 0.1 秒

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

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

我想知道该设置是否使用 Javascript，但可能存储的文件太多我不知所措。

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

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

Answer 1

它在您的wp-content/themes/agent/woocommerce/woocommerce-custom.js 文件中，位于第 19 行。

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

已编辑

子主题仅覆盖主主题目录中的文件（如 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 调用，那么您不必做任何事情。由于这没有发生，您只需四处寻找，看看主题作者做了什么。