tailwind实现鼠标悬停按钮上方弹出提示层效果代码-html代码-BFW代码库

tailwind实现鼠标悬停按钮上方弹出提示层效果代码

代码语言：html

所属分类：弹出层

代码描述：tailwind实现鼠标悬停按钮上方弹出提示层效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.0.0.js"></script>
</head>
<body style="padding:300px;">
    
    
<div class="group relative block w-32 cursor-pointer text-center">
  <span
    class="block bg-gradient-to-tr from-blue-500/80 via-blue-600 to-blue-500 text-gray-100 rounded-md px-4 py-2 z-20 drop-shadow-md hover:from-blue-600 hover:to-blue-500"
    >Hover Me</span
  >
  <div
    class="absolute pointer-events-none block w-[150%] -top-28 left-1/2 -translate-x-1/2 z-10"
  >
    <div
      class="flex flex-col items-center opacity-0 transition-all ease-in duration-300 translate-y-1/2 group-hover:opacity-100 group-hover:-translate-y-1/4"
    >
      <div
        class="flex flex-col justify-start text-left w-full bg-gray-700 rounded-md p-3 drop-shadow"
      >
        <span class="text-sm font-normal text-gray-100 leading-3">Revenue</span>
        <div
          class="inline-flex justify-between items-center opacity-0 translate-y-1 transition-all ease-in delay-300 duration-300 group-hover:opacity-100 group-hover:translate-y-0"
        >
          <span class="text-2xl font-bold tracking-wide text-gray-100"
            >US$150</span
          >
          <div class="inline-flex items-center">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor".........完整代码请登录后点击上方下载按钮下载查看