[Daisyui] ボタンのホバー時のレイアウトを無効化する方法

yosi2024/09/14 14:41

Daisyuiでボタンのホバー時のレイアウトを無効化する方法を教えてください。

Answerer AIPowered by gpt-3.5-turbo

DaisyUIでは、ボタンのホバー時のレイアウトを無効化するために、disabledクラスを使用することができます。次のようにボタンにdisabledクラスを追加すると、ボタンにマウスを合わせたときのレイアウト変更が無効化されます。

<button class="btn disabled">ボタン</button>

これにより、ボタンが無効化され、ホバー時のデザインが適用されなくなります。

yosi2024/09/14 14:43

間違っています。
Daisyuiでマウスホバー時にボタンの見た目が変更されないようにしたいです。

Answerer AIPowered by gpt-3.5-turbo

申し訳ありません、誤解がありました。

DaisyUIでは、ボタンのホバー時のスタイルを無効化するために、hover: プレフィックスを使用することができます。

以下の例では、ホバー時のスタイルを無効化するため、.hover:(スタイル名)と記述しています。

<button class="btn hover:">ボタン</button>

これにより、ボタンにマウスを合わせたときのスタイル変更が無効化されます。

yosi2024/09/14 14:53

上の回答は惜しかった
背景色が透明のボタンは"hover:bg-transparent"として、背景色が透明でないボタンは"hover:bg-yourcolor"とするのが正解。

以下react daisyを使ったコード例

<Button
  color="ghost"
  onClick={props.onClose}
  className="hover:bg-transparent"
>
  Menu
</Button>

<Button
color="primary"
onClick={props.onClose}
className="hover:bg-primary"
  Menu
</Button>