Question

我正在设计wordpress页面，设计一个图像块，上面有文字。但是这个设计在我的页面中重复了6次，所以我使用了高级自定义字段中继器重复该图像块6次。但现在问题是当我将鼠标悬停在每个图像上时，我想要一个新的文本副本。因为我使用了Jquery，因为我的图像块的类名是相同的，所以当我将鼠标悬停在任何一个框上时，所有的框内容都会被更改。我想在哪个盒子上我只悬停那些内容应该改变。

$(".services-block").on({
        mouseenter: function() {
            $(".wrap-content-services").hide();
            $(".overlay-content-services").show();
        },
        mouseleave: function() {
            $(".wrap-content-services").show();`enter code here`
            $(".overlay-content-services").hide();
        }
    });

自定义字段的Html结构

<?php if (have_rows('services_content')): ?>
<div class="row">
    <?php while (have_rows('services_content')): the_row() ?>
        <div class="col-md-6 services-block">
            <?php echo wp_get_attachment_image(get_sub_field('services_image'), 'full'); ?>
            <div class="wrap-content-services">
                <?php the_sub_field('services__overlay_content'); ?>
            </div>
            <div class="overlay-content-services">
                <?php the_sub_field('services__hover_content'); ?>
            </div>
        </div>
    <?php endwhile; ?>
</div>

Answer 1

将您的JQuery更改为：

$(".services-block").on({
    mouseenter: function() {
        $(this).find(".wrap-content-services").hide();
        $(this).find(".overlay-content-services").show();
    },
    mouseleave: function() {
        $(this).find(".wrap-content-services").show();`enter code here`
        $(this).find(".overlay-content-services").hide();
    }
});

$(".wrap-content-services").hide();将使用.wrap-content-services

类隐藏所有元素

如何在Advance Custom Field的每个中继循环中显示不同的值

1 个答案: