Tailwind CSS:在图像悬停时显示文本

Posted

技术标签:

【中文标题】Tailwind CSS:在图像悬停时显示文本【英文标题】:Tailwind CSS: display text on image hover 【发布时间】:2021-05-01 03:54:16 【问题描述】:

如何使用 Tailwind CSS 在图像悬停时显示文本:在图像悬停时显示文本?

这是我的头像?我希望在用户悬停图像时显示文本“哺乳动物”?

<img src="/img/cat/categories/mammals.png"  class="max-w-full max-h-full">

【问题讨论】:

title替换alt属性。 【参考方案1】:

我更喜欢使用相对位置和绝对位置,因为它给了我更多的选择。查看此代码Display text on hover

<div class="w-64 h-64 bg-red-100 relative">
  <div class="absolute inset-0 bg-cover bg-center z-0" style="background-image: url('https://upload.wikimedia.org/wikipedia/en/3/3c/JumanjiTheNextLevelTeaserPoster.jpg')"></div>
  <div class="opacity-0 hover:opacity-100 duration-300 absolute inset-0 z-10 flex justify-center items-center text-6xl text-white font-semibold">Dwayne</div>
</div>

【讨论】:

我将在悬停不透明度上显示标题。在 Tailwind CSS 中可能吗? prntscr.com/12qt4k5 @ExpertWeblancer 当然可以。请为此创建一个单独的问题。这样,这不会隐藏在某些线程的评论中。让其他人更容易关注。【参考方案2】:

你可以在你的img标签中使用title属性。

<img src="/img/cat/categories/mammals.png"  class="max-w-full max-h-full" title="mammals">

【讨论】:

【参考方案3】:

请使用此代码效果很好

  <div class="relative ">
    <a class="absolute inset-0 z-10 bg-white text-center flex flex-col items-center justify-center opacity-0 hover:opacity-100 bg-opacity-90 duration-300">
      <h1  class=tracking-wider >Title</h1>
      <p  class="mx-auto">Description</p>
      </a>
    <a href="#" class="relative">
        <div class="h-48 flex flex-wrap content-center">
            <img src="/image_url" class="mx-auto  " >
        </div>
    </a>
  </div>

【讨论】:

我针对我的情况调整了这个解决方案,我在 React 中动态传递文本和 img 作为道具,正如一些“适应”作为魅力所说的那样 我调整了解决方案,为它们传递可点击的 svg 图标和文本标签【参考方案4】:

另一个想法是使用group-hover 类。

.as-console-wrapper 
  display: none !important;
<script src="https://cdn.tailwindcss.com"></script>

<div class="w-64 bg-red-100 relative group">
  <img src="https://upload.wikimedia.org/wikipedia/en/3/3c/JumanjiTheNextLevelTeaserPoster.jpg" />
  <div class="opacity-0 group-hover:opacity-100 duration-300 absolute inset-x-0 bottom-0 flex justify-center items-end text-xl bg-gray-200 text-black font-semibold">Dwayne</div>
</div>

DEMO

【讨论】:

以上是关于Tailwind CSS:在图像悬停时显示文本的主要内容,如果未能解决你的问题,请参考以下文章

仅使用 CSS 悬停时显示文本

css 淡出图像并在悬停时显示标题。

css 淡出图像并在悬停时显示标题。

css 将标题置于图像上并仅在悬停时显示。

css 将标题置于图像上并仅在悬停时显示。

Flipbox 在 Chrome 中悬停时显示扭曲的图像