Как сделать чтобы элемент появлялся при наведении на блок?

Для достижения такого эффекта, можно использовать CSS свойство "display" в сочетании с псевдоклассом ":hover".

Шаг 1: Создать стиль для элемента, который будет скрыт по умолчанию:

.hidden-element {
  display: none;
}

Шаг 2: Создать стиль для блока, на который пользователь наводит курсор мыши:

.hover-block:hover .hidden-element {
  display: block;
}

Шаг 3: Разместить элемент внутри блока:

<div class="hover-block">
  <p>Текст блока</p>
  <div class="hidden-element">
    <p>Скрытый элемент</p>
  </div>
</div>

При выполнении этих шагов, при наведении курсора на блок с классом "hover-block", элемент с классом "hidden-element" будет отображаться. После убирания курсора мыши с блока, элемент снова будет скрыт.