Отображение кнопки при наведении на div в TailwindCSS

Question

В настоящее время у меня возникли некоторые проблемы с использованием Tailwind CSS для отображения кнопки при наведении курсора на div в Vue. Обычно я бы использовал CSS, но я хочу сделать это с попутным ветром.

Я ссылался на документацию, используя visibility , но она не работала, как ожидалось. Нормально ли видимость для элементов, связанных с экраном? или его можно использовать для кнопок и другого контента?

Код

<div>
  <button class="text-white invisible hover:visible">Hello</button>
</div>

Answer 1

Основываясь на моих исследованиях и рекомендациях, мне сказали использовать непрозрачность, но непрозрачность на самом деле не дает хорошего ощущения UI / UX, поэтому я пошел другим путем создания частного логического объекта в vue, такого как

private hover: boolean = false;

Примечание. Я обнаружил, что @mouseover и @mouseleave все еще жизнеспособны в Vue.

, затем в моем .vue файл, который я хотел бы рассмотреть, используя логические переменные для запуска цели, которую я хотел бы скрыть и отобразить. Это

На целевой кнопке или элементе, которые вы хотите скрыть и отобразить при наведении курсора

<div class="mt-2 mb-2"
`@mouseover = "hover = true"`
`@mouseleave = "hover = false"`
>Hello World
</div>

Примечание: я использую Vue в тандеме с машинописью для достижения такой цели.

Answer 2

Невозможно навести курсор на скрытый элемент.

Одно из решений - использовать непрозрачность

<div>
  <button class="text-white opacity-0 hover:opacity-100">Hello</button>
</div>