在 Astro 中使用变量更改 ::before 背景图像

Question

我正在创建一个无序列表 (ul)，其中，将鼠标悬停在列表项 (li) 上时，位于 li 左侧的 ::before 伪元素会更改其背景图像。

我需要调用一个包含 li 的组件（我正在使用 Astro）并通过 ImageMetadata 传递一个 prop。但是，我不知道当用户将鼠标悬停在 li 上时如何将图像插入 ::before background-image 中。

我需要使其可调用。

调用组件：

  <Book index='5' title='Proyects' img={proyectsImg}></Book>

成分：

<li id="item" style=`--i:${index}; --urlimg:'${urlImg}';`>
  <a href="#" class="flex justify-between flex-col align h-full items-center" ><span id="title">{title}</span><span id="sign">?</span></a>
</li>

我尝试在 astro 组件内部执行此操作，但我现在不知道如何将图像连接到背景图像上。 我也尝试在 astro 组件中使用它，但我不知道如何引用 ::before 背景图像

Answer 1

在您的

<Book>

组件中，您可以使用传递的

ImageMetadata

的

src

属性来创建

::before

伪元素样式可以引用的 CSS 变量。

需要注意的一件事：您必须在自定义属性 (

url()

) 中使用 CSS

--urlimg

函数。

标记如下所示：

---
const { img, index } = Astro.props;
---

<li style={`--i: ${index}; --urlimg: url('${img.src}');`}>
  <a>...</a>
</li>

然后在 CSS 中，您可以使用变量：

li:hover::before {
  background-image: var(--urlimg);
}

或者，如果您使用的是 Tailwind，它看起来就像基于您的

<a>

类名称：

<li class="hover:before:bg-[var(--urlimg)]">