Для достижения такого эффекта, можно использовать 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" будет отображаться. После убирания курсора мыши с блока, элемент снова будет скрыт.