如何使用 Tailwind Typography 和散文将样式仅应用于我悬停的元素？

Question

我目前正在使用 Tailwind 排版和散文来设计我的 Markdown 页面。我正在尝试专门为图像添加悬停效果。但是，我遇到一个问题，即悬停效果同时应用于所有图像，而不仅仅是光标所在的图像。关于如何纠正这个问题有什么建议吗？

这是我的代码：

<article
    class="prose-img:w-full prose-img:rounded-2xl prose-img:object-cover prose-img:transition-all prose-img:duration-500 prose-img:ease-out prose-img:hover:scale-[1.01] prose-img:md:rounded-3xl"
>

我应用了 prose-img:hover 样式，期望它仅适用于我悬停的实际元素。相反，它也会将其应用于所有图像。它似乎还悬停在一张图像上实际上会激活所有图像。

Answer 1

根据文档，有时变体顺序很重要：

订购堆叠修饰符

堆叠修饰符时，它们是从内到外应用的，就像嵌套函数调用一样：

// These modifiers:
'dark:group-hover:focus:opacity-100'

// ...are applied like this:
dark(groupHover(focus('opacity-100')))

在大多数情况下，这实际上并不重要，但在某些情况下，您使用的顺序实际上会生成有意义的不同 CSS。

在您的情况下，您有

prose-img:hover:

，其概念上类似于

prose-img(hover(…))

。这将评估为：

1. hover:

   – 悬停此元素（

   <article>

   ）。
2. 选择

   <img>

   中的所有

   prose

   元素。

实际上，您似乎想要相反的结果，

hover:prose-img:

：

1. 选择

   <img>

   中的所有

   prose

   元素。

2. hover:

   – 悬停此元素（

   <img>

   中的

   prose

   元素）。

<script src="https://cdn.tailwindcss.com/3.4.1?plugins=typography"></script>

<article
  class="prose-img:w-full prose-img:rounded-2xl prose-img:object-cover prose-img:transition-all prose-img:duration-500 prose-img:ease-out hover:prose-img:scale-[1.01] prose-img:md:rounded-3xl"
>
  <img src="https://picsum.photos/500/100">
  <img src="https://picsum.photos/500/100?">
</article>