Как скрыть этот текст при наведении?

от
prokoding.ru > HTML > Как скрыть этот текст при наведении?

Для того чтобы скрыть текст при наведении мы используем CSS псевдокласс :hover в комбинации с атрибутом display. Вот пример кода:

<!DOCTYPE html>
<html>
<head>
    <style>
        .hidden-text {
            display: block;
        }

        .hidden-text:hover {
            display: none;
        }
    </style>
</head>
<body>
    <div>
        <p class="hidden-text">Текст, который будет скрыт</p>
    </div>
</body>
</html>

В данном примере у нас есть HTML элемент <p> с классом "hidden-text", который содержит текст, который мы хотим скрыть при наведении. Вначале этот элемент отображается блочно с помощью свойства display: block.

Затем мы добавляем CSS правило .hidden-text:hover, в котором указываем, что при наведении на элемент с классом "hidden-text" он должен быть скрыт с помощью свойства display: none.

Таким образом, при наведении курсора мыши на данный текст, он будет исчезать. Если курсор будет удален с элемента, то текст снова появится.