通过 ACF 在悬停时添加和删除默认和悬停背景图像

Posted 2023-03-25

【中文标题】通过 ACF 在悬停时添加和删除默认和悬停背景图像

【英文标题】：Add and remove default and hover background images on hover through ACF

【发布时间】：2018-12-24 20:45:03

【问题描述】：

这是我的第一个帖子，我会尽量准确。 我对使用 php 很陌生，因此我目前的项目是一个很大的挑战。

我有 2 个产品，我希望能够通过 ACF 交换默认 BG 图像和悬停图像。

ATM 我可以更换悬停，但它始终可见。 如果我通过所见即所得编辑器添加图像，它不会设置为 bg 图像，而是在内容之上。

这是我所拥有的：

These are the two products. The left one has the hover bg img, shown at all time. The right one doesnt have any for now

Here you can see the ACF on the relevant page

Here is what it looks like, if I add an image through the wysiwyg editor (the hover img shows in the background)

Here is my css, for the products

代码如下：

    <?php
/**
 * Variables
 */

$introductiontitle = get_sub_field('introduction_title');
$introductionsubtitle = get_sub_field('introduction_subtitle');
$introductionsubtitle2 = get_sub_field('introduction_subtitle_2');
$hover_image1 = get_sub_field('hover_element_1_background');
$hover_image2 = get_sub_field('hover_element_2_background');

<!--  Introduction
-------------------------------------------------------------->
<div class="container-fluid pt-5 pb-8">
<div class="container">
    <div class="row">
        <div class="col-12 text-center mb-3">
            <h1 class="font-weight-bold mb-3">
                <?php echo $introductiontitle; ?>
            </h1>
            <p>
                <?php echo $introductionsubtitle; ?>
            </p>
            <p>
                <?php echo $introductionsubtitle2; ?>
            </p>
        </div>

        <div class="col-12 col-md-6">
            <div class="col-12 product chart py-5 mb-3 bg-center bg-cover"
            <?php if ($hover_image1)  ?>
                    style="background-image: url(<?php echo $hover_image1 ?>"
                <?php  ?>
            >
                <?php the_sub_field('hover_element_1'); ?>
            </div>
        </div>
        <div class="col-12 col-md-6">
            <div class="col-12 product chart py-5 mb-3 bg-center bg-cover"
                <?php if ($hover_image2)  ?>
                    style="background-image: url(<?php echo $hover_image2 ?>"
                <?php  ?>
            >
                <?php the_sub_field('hover_element_2'); ?>
            </div>
        </div>
    </div>
</div>

我希望这一切都有意义！？否则请告诉我，我会解释得更好。

提前致谢

【问题讨论】：

你没有:hover 伪类？像.whateverClass:hoverbackground-image: url(<?php echo $hover_image1 ?>; 我不认为伪类可以用内联样式来编写。我猜你可以编写动态css，通过在div中添加一个类，带有图像的名称或其他东西，并在你当前的php文件中使用<style>定位它？

另一个想法，可能是使用一点js。比如onMouseOver="this.style.color='#0F0'" onMouseOut="this.style.color='#00F'"会改变颜色和悬停效果一样。

@Stender，“通过向 div 添加一个带有图像名称或其他名称的类，并在当前的 php 文件中使用

你不能在 style.css 中这样做 - 但你可以在元素上方的样式块中这样做

【参考方案1】：

我会发布评论以进行澄清，但还没有足够的分数，所以我决定发布答案，因为这可能是您想要实现的目标。

使用分层元素和不透明度的组合，您应该能够实现背景图像发生变化的效果。

这是一个使用纯色的示例，但它们可以轻松更改为其他元素（例如您的自定义背景图像和图像）： https://codepen.io/epsilon42/pen/NBNVad

html：

  <div class="product" style="background: #ccc;"><!-- change inline style to to ACF initial background-image -->
    <div class="hover-background" style="background: #666;"><!-- change inline style to to ACF hover background-image --></div>
    <div class="copy">
      <h2>test</h2>
      <p>lorem ipsum lorem ipsum</p>
      <div class="icon">
        <div class="initial-icon" style="background: #f00;"><!-- change this div to initial <img> --></div>
        <div class="hover-icon" style="background: #b4d455;"><!-- change this div to hover <img> --></div>
      </div>   
    </div>
  </div>

CSS：

.product 
  width: 300px;
  height: 300px;
  position: relative;

.product .hover-background,
.product .copy 
  width: 100%;
  height: 100%;
  position: absolute;

.product .hover-background 
  opacity: 0;
  transition: 0.2s all ease-in;

.product .copy 
  text-align: center;

.product .copy .icon 
  width: 50px;
  height: 50px;
  margin: 0 auto;
  position: relative;

.product .copy .icon .initial-icon,
.product .copy .icon .hover-icon 
  width: 100%;
  height: 100%;
  position: absolute;

.product .copy .icon .hover-icon 
  opacity: 0;
  transition: 0.2s all ease-in;

.product:hover .hover-background 
  opacity: 1;

.product:hover .copy .icon .hover-icon 
  opacity: 1;

您需要稍微调整 CSS 以适应您的情况。

【讨论】：

非常感谢@epilson42。这是一个巨大的帮助！我一回家就试一试。稍后我会告诉你，如果它有效 :) Stender 也非常感谢你的回复。使用您的第一个解决方案，我并没有完全解决它 - 但我很确定，只是我做错了......