Question

http://intelmarketing.mk/demos/boutiques/

这是我正在构建的wordpress主题，我有这个问题：

尝试并打开http://intelmarketing.mk/demos/boutiques/
向下滚动到NEW ARRIVALS
将鼠标悬停在第一张图片上

比你看到唯一的第一张图片正在使用脚本，为什么会这样？

这是我使用过的content-product.php文件中的代码

<script>
$('#div1').mouseover(function() {
    $('#div2').fadeIn(500);
});

$('#div2').mouseover(function() {
    $('#div2').fadeIn(500);
});

$('#div1').mouseout(function() {
    $('#div2').fadeOut(500);
});

$('#div2').hide().mouseout(function() {
    $('#div2').fadeOut(500);
});
</script>

<?php
/**
 * The template for displaying product content within loops.
 *
 * Override this template by copying it to yourtheme/woocommerce/content-product.php
 *
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     1.6.4
 */

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

global $product, $woocommerce_loop;

// Store loop count we're currently on
if ( empty( $woocommerce_loop['loop'] ) )
    $woocommerce_loop['loop'] = 0;

// Store column count for displaying the grid
if ( empty( $woocommerce_loop['columns'] ) )
    $woocommerce_loop['columns'] = apply_filters( 'loop_shop_columns', 4 );

// Ensure visibility
if ( ! $product || ! $product->is_visible() )
    return;

// Increase loop count
$woocommerce_loop['loop']++;

// Extra post classes
$classes = array();
if ( 0 == ( $woocommerce_loop['loop'] - 1 ) % $woocommerce_loop['columns'] || 1 == $woocommerce_loop['columns'] )
    $classes[] = 'first';
if ( 0 == $woocommerce_loop['loop'] % $woocommerce_loop['columns'] )
    $classes[] = 'last';
?>
<li <?php post_class( $classes ); ?>>

    <?php do_action( 'woocommerce_before_shop_loop_item' ); ?>

    <a href="<?php the_permalink(); ?>">
        <div id="div1">
        <?php
            /**
             * woocommerce_before_shop_loop_item_title hook
             *
             * @hooked woocommerce_show_product_loop_sale_flash - 10
             * @hooked woocommerce_template_loop_product_thumbnail - 10
             */
            do_action( 'woocommerce_before_shop_loop_item_title' );
        ?>
        </div>
        <div id="div2">
        <h3><?php the_title(); ?></h3>

        <?php
            /**
             * woocommerce_after_shop_loop_item_title hook
             *
             * @hooked woocommerce_template_loop_price - 10
             */
            do_action( 'woocommerce_after_shop_loop_item_title' );
        ?>
    </div>
    </a>

    <?php do_action( 'woocommerce_after_shop_loop_item' ); ?>

</li>

如果有人知道如何解决这个问题，请告诉我:)

谢谢！

更新我将脚本改为

<script>

$('.attachment-shop_catalog').mouseover(function() {
    $('.amount').fadeIn(500);
    $('#div2 h3').fadeIn(500);
});

$('.amount').mouseover(function() {
    $('.amount').fadeIn(500);
});

$('#div2 h3').mouseover(function() {
    $('#div2 h3').fadeIn(500);
});

$('.attachment-shop_catalog').mouseout(function() {
    $('.amount').fadeOut(500);
    $('#div2 h3').fadeOut(500);
});

$('.amount').hide().mouseout(function() {
    $('.amount').fadeOut(500);
});

$('#div2 h3').hide().mouseout(function() {
    $('#div2 h3').fadeOut(500);
});
</script>

但是现在它们都是隐藏的，但是如果你鼠标悬停没有遇到什么图像将显示所有图像和价格高于所有图像，我只是想当我去一个图像向我显示那个图像的标题和价格..我希望你能理解我的意思..

由于

Answer 1

试试这个，

首先将这些按钮style:none设置为隐藏在第一个加载后，将CSS添加到样式表中。

ul.products li.product h3, ul.products li.product .amount{display:none;}

而不是您的脚本尝试跟随。

jQuery('ul.products li.product').hover(function(){
  jQuery(this).find('h3').fadeIn(500);
  jQuery(this).find('.amount').fadeIn(500);
},function(){
  jQuery(this).find('h3').fadeOut(500);
  jQuery(this).find('.amount').fadeOut(500);
});

希望它有效..

Answer 2

试试这个：

如果您将mouseover事件监听器放在class上，则可以让它们淡入每个具有该特定班级的图像。

$('.attachment-shop_catalog').mouseover(function() {
    $(this).fadeIn(500);
});

如果您使用此方法，则无需单独为#div1，#div2和#div3添加事件监听器。

Wordpress WooCommerce content-product.php javascript

2 个答案: