延迟覆盖在鼠标移出时消失

Question

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

URL: http://economistfoundation.org/the-library/

我尝试查看主题和 woocommerce 插件中的各种 CSS 文件，看看是否有一个 'transition' 具有 0.5s 或类似的控制 .thumb-overlay，但是找不到任何相关的内容。

我想知道设置是否在Javascript中，但是可能存储的文件太多了，我很茫然。

我已经使用 Firebug 检查器查看了该页面，并且 .thumb-overlay 具有在 'display: block' 和 'display: none' 之间移动的样式属性，并且随着您移动鼠标'opacity' 的属性从 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. If your parent theme uses this, you can override the JS files by using wp_dequeue_script 并将您自己的脚本加入队列。

像这样...

<?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 摆脱那些回显脚本的函数，然后将您自己的脚本加入队列。

如果脚本被硬编码到模板文件中，您只需在子主题中替换该模板文件而无需脚本标签。

如果他们使用 wp_enqueue_script 调用并利用 get_stylesheet_directory_uri，那么您无需执行任何操作。既然这没有发生，你只需要四处看看主题作者做了什么。

延迟覆盖在鼠标移出时消失

Delay for overlay to disappear on mouseout

css

wordpress

delay

mouseout

woocommerce