Open4

daisyuiのトリック

totto2727totto2727

dropdown-hoverを使用時にdropdown-contentにマージンをつけるとhoverが途切れてしまう問題

<!-- hover時のパディングとマイナスマージンは合わせること -->
<div class="dropdown dropdown-hover hover:pb-4 hover:-mb-4">
  <div>button</div>
  <!-- マージントップは上記と合わせること -->
  <div class="dropdown-content mt-4">...</div>

https://daisyui.com/components/dropdown/#open-on-hover

totto2727totto2727

CSS Variantsを利用したバージョン

      <div
        style={{ "--margin": "1rem" }}
        class={clsx(
          `dropdown dropdown-end dropdown-hover`,
          `hover:mb-[calc(-1*var(--margin))] hover:pb-[var(--margin)]`,
        )}
      >
        <div
          tabIndex={0}
          role="button"
          class="btn btn-primary"
          aria-label="カラーテーマの設定ポップアップ"
        >
          <PaletteIcon
            name="material-symbols:palette-outline"
            class="size-6 sm:size-8"
          />
        </div>
        <form
          class={clsx(
            `mt-[var(--margin)]`,
            `menu dropdown-content z-10 grid grid-cols-[100%] rounded-box bg-base-100 shadow`,
          )}
        >