悬停以影响父元素中较高的元素

Question

我在悬停时遇到问题，我希望当我悬停在图像或按钮上时，按钮具有不透明度并且图像在其容器中缩放。

我可以使用 .css、(:hover) 和使用 (+) 在父元素中向下的组合来实现上述所有内容。

然而，当我将鼠标悬停在圆形按钮上时，我无法让 .css 也选择上面的图像，因为似乎没有一个 sudo 选择器可以在父元素中向上移动。

因此，我尝试添加一些简单的 Jquery 来添加/删除 .css 以实现此目的，但由于这也在 Wordpress 循环中，因此我选择了所有图像，而不仅仅是与此按钮相关的图像。

父级中是否有任何 sudo 元素？如果不是，这怎么可能呢？我在想；

只选择上面的图像，但我不知道如何写这个，我尝试使用 .prev() 但没有运气。

非常感谢任何帮助。

<!-- Services Inner Wrapper -->
<div class="services-archive-inner-wrapper">
    <!-- Flexed -->
    <div class="archive-flexed">
        <!-- Visual Content -->
        <div class="visual-content">
            <!-- Image Wrapper -->
            <a class="archive-image-wrapper" href="<?php the_permalink();?>">
                

                <!-- The Circular Image Is Here -->
                <!-- The Circular Image Is Here -->
                <!-- The Circular Image Is Here -->

                <?php>THE IMAGE IS HERE<?>

                <!-- The Circular Image Is Here -->
                <!-- The Circular Image Is Here -->
                <!-- The Circular Image Is Here -->


            </a>
            <!-- Archive Button Wrapper -->
            <div class="image-link-button-wrapper">
                <div class="coloured-link-detail">


                    <!-- The Circular Button Link Is Here -->
                    <!-- The Circular Button Link Is Here -->
                    <!-- The Circular Button Link Is Here -->

                        <a class="image-link-button" href="<?php the_permalink();?>"><i class=" fas fa-chevron-right"></i></a>

                    <!-- The Circular Button Link Is Here -->
                    <!-- The Circular Button Link Is Here -->
                    <!-- The Circular Button Link Is Here -->


                </div>
            </div>
        </div>
        <!-- Archive Text Content -->
        <div class="archive-text-content">
            <h2 class="primary-border-left left-border-spacing article-title"><?php the_title(); ?></h2>
            <!-- Archive Sub Title -->
            <h3 class="primary-border-left left-border-spacing article-sub-head"><?php the_field('job_title'); ?></h3>
            <!-- Archive Copy -->
            <div class="primary-border-left left-border-spacing">
                <?php echo first_section_copy_excerpt(); ?>
                <a class="archive-read-more" href="<?php the_permalink();?>">Read More &raquo;</a>
            </div>
        </div>
    </div>
</div>

CSS

.archive-image-wrapper:hover img {
    transform: scale(1.115);
}
.archive-image-wrapper:hover + .image-link-button-wrapper .image-link-button {
    background: purple;
    color: white;
}

JS

$(document).ready(function() {
  $('.image-link-button').hover(function() {
    $('.archive-image-wrapper img').prev().css('transform', 'scale(1.115)');
  });
});