Содержание
Скрытый текст на HTML – как написать невидимый текст на сайт
Желание скрыть часть контента может возникать по разным причинам. Выяснять, для чего скрывают текст, картинки и другие элементы страницы, не станем, лучше узнаем, как написать невидимый текст, спрятать фотографию, баннер, ссылку различными способами. Для реализации большинства методов потребуются минимальные знания в области программирования и HTML-разметки.
Используем HTML-код
Чтобы при помощи HTML создать скрытый текст, нужно открыть исходный код страницы, найти скрываемое слово или предложение и установить цвет шрифта таким же, как цвет фона страницы. После загрузки страницы в браузере текст сольется с фоном и станет невидимым. Также предложения можно сделать практически невидимыми путем изменения размера шрифта до очень маленького. Еще один вариант: скрыть текст под изображением, которое дополнительно может сливаться с фоном и быть из-за этого невидимым.
Используем DHTML
Динамический HTML-код состоит из обычного HTML, каскадных таблиц стилей и элементов языка сценариев. Он позволяет вносить изменения в содержимое страниц без их перезагрузки. Для реализации задуманного пользователю потребуется создать небольшой код CSS и установить его в теле страницы между тегами body. Каскадные таблицы стилей дают практически безграничные возможности в плане изменения внешнего вида контента. В примере текст скрыт, но при нажатии на кнопку он появляется. Если пользователю требуется только скрыть контент, то часть кода можно удалить.
Скрываем текст на странице в динамическом HTML-коде
Как скрыть текст на странице в DHTML
При помощи стилей можно прятать ссылки, предложения, текстовые блоки, таблицы, изображения, используя свойства скрываемого объекта. Например, свойства opacity, visibility, display, position, clip-path позволяют скрывать объекты разными способами.
Методы скрытия объектов в DHTML
Способы скрытия объектов
Методы скрытия объектов в DHTML
Способы скрытия объектов
Используем JavaScript
Код скрипта можно вписывать как в заголовок, так и в тело страницы между тегами head или body соответственно. Главное, не забыть обозначить начало и конец кода. Для этого пользуются тегами script.
Сначала надо написать функцию, которая будет скрывать контент.
Код функции на JavaScript для скрытия контента
Функция для скрытия контента в JavaScript
Далее в нужном месте кода страницы следует запросить вывод результата работы скрипта.
Вывод результата работы JS-скрипта
Вывод результата работы скрипта
При помощи данного скрипта была скрыта большая часть статьи. Ссылка «Подробнее» необходима для отображения спрятанного контента и одновременного скрытия самой ссылки после появления текста, так как в ней отпала необходимость.
Ссылка ‘Подробнее’ в коде страницы на JavaScript
Ссылка ‘Подробнее’ в JavaScript
Еще один пример. Этот скрипт нужно вставить в тело страницы в нужном месте. После загрузки страницы в браузере пользователь увидит две кнопки: «Скрыть» и «Показать». Нажав на соответствующую, он увидит или скроет alalala. Если вас заинтересовал вопрос, как сделать тег невидимым, то вам следует внимательнее относиться к написанию кода. Правильно написанные и использованные теги не отображаются браузерами, поэтому скрывать их нет необходимости.
Текст в HTML . Основы HTML
Текст в HTML
HTML – Это язык разметки , мы познакомились как написать первую страницу — html , рассмотрели структуру html – страницы , узнали как можно подключить таблицы стилей – css , разделить страницу на блоки , сейчас можно перейти к изучению основных тегов – html , с помощью которых можно форматировать html – страницу , отдельные символы , целые блоки .
С помощью html – тегов можно отформатировать текст в html – страницы , визуально теги не отображаются на странице , мы видим только текст . И чтобы выделить текст полужирным или курсивным начертанием . Можно выделить часть текста или целый блок другим цветом , приходится использовать специальные теги , которые помогают нам это сделать . Каждый тег играет свою роль . Рассмотрим основные теги которые часто могут применяться для форматирования текста.
Полужирный текст в HTML
Тег <b> и тег <strong> – Парные теги , с помощью этих тегов текст можно выделить полужирным шрифтом , подчеркнуть важность текста.
Приоритет имеет парный тег <strong>
.
Полужирный текст
<!doctype html> <html lang="ru"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Полужирный текст</title> <style type="text/css"> @media screen and (max-width: 767px) { body { max-width: 767px; height: auto; } } h2 { color: blue; } b,strong { font-size: 1.2em; /*Размер шрифта b,strong*/ } </style> </head> <body> <h2>Полужирный текст в HTML</h2> <b>Полужирный шрифт .</b><br /> <strong>Важный фрагмент текста . </strong> </body> </html>
Открыть пример в новом окне
Полужирный текст
Полужирный текст
Наклонный текст в HTML
Тег <i> и тег <em> – Парные теги , выделяет текст наклоном (курсивом) .
Наклонный текст
<!doctype html> <html lang="ru"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Наклонный текст</title> <style type="text/css"> @media screen and (max-width: 767px) { body { max-width: 767px; height: auto; } } h2 { color: blue; } i,em { font-size: 1.2em; /*Размер шрифта*/ } </style> </head> <body> <h2>Наклонный текст в HTML</h2> <i>Текст выделенный курсивом .</i><br /> <em>Текст также выделенный курсивом .</em> </body> </html>
Открыть пример в новом окне
Наклонный текст
Наклонный текст
Подчеркнутый текст в HTML
Тег <u> – Парный тег , отображает текст подчеркнутым.
Подчеркнутый текст
<!doctype html> <html lang="ru"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Подчеркнутый текст</title> <style type="text/css"> @media screen and (max-width: 767px) { body { max-width: 767px; height: auto; } } h2 { color: blue; } u { font-size: 1.2em; /*Размер шрифта*/ } </style> </head> <body> <h2>Подчеркнутый текст в HTML</h2> <u>Подчеркнутый текст .</u> </body> </html>
Открыть пример в новом окне
Подчеркнутый текст
Подчеркнутый текст
Перечеркнутый текст в HTML
Тег <u> – Парный тег , отображает текст подчеркнутым.
Перечеркнутый текст
<!doctype html> <html lang="ru"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Перечеркнутый текст</title> <style type="text/css"> @media screen and (max-width: 767px) { body { max-width: 767px; height: auto; } } h2 { color: blue; } del,ins { font-size: 1. 2em; /*Размер шрифта*/ } </style> </head> <body> <h2>Перечеркнутый текст в HTML</h2> <del>Старый текст</del><br /> <ins>Старый текст заменили новым .</ins> </body> </html>
Открыть пример в новом окне
Перечеркнутый текст
Перечеркнутый текст
Текст меньшего размера в HTML
Парный тег <small> – помогает сделать текст меньшего размера .
Текст меньшего размера
<!doctype html> <html lang="ru"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Текст меньшего размера</title> <style type="text/css"> @media screen and (max-width: 767px) { body { max-width: 767px; height: auto; } } h2 { color: blue; } p { font-size: 1.2em; /*Размер шрифта*/ } </style> </head> <body> <h2>Текст меньшего размера в HTML</h2> <p>Текст <small>меньшего</small> размера</p> </body> </html>
Открыть пример в новом окне
Текст меньшего размера
Текст меньшего размера
Создание нижних и верхних индексов
Парный тег <sub> сдвигает текст ниже уровня строки и делает текст меньше основного текста .
Парный тег <sup> сдвигает текст выше уровня строки и делает текст меньше основного текста .
Создание нижних и верхних индексов
<!doctype html> <html lang="ru"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Создание нижних и верхних индексов</title> <style type="text/css"> @media screen and (max-width: 767px) { body { max-width: 767px; height: auto; } } h2 { color: blue; } p { font-size: 1.2em; /*Размер шрифта*/ } </style> </head> <body> <h2>Создание нижних и верхних индексов</h2> <p>Формула воды H<sub>2</sub>O<br /> Единица измерения площади — м<sup>2</sup></p> </body> </html>
Открыть пример в новом окне
Создание нижних и верхних индексов
Создание нижних и верхних индексов
Скрытый текст тег — <details>
<details> Элемент представляет собой виджет раскрытия , из которого пользователь может получить дополнительную информацию или элементы управления. По умолчанию содержимое элемента не отображается, для изменения статуса применяется атрибут open.
Тег <details> используется для хранения информации, которую можно скрыть или показать по требованию пользователя.
Рассмотрим несколько примеров с использование этого тега при написание html – страниц с подключением стилей css .
Текст скрыт при загрузке страницы
<!doctype html> <html lang="ru"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Скрытый текст</title> <style type="text/css"> @media screen and (max-width: 767px) { body { max-width: 767px; height: auto; } } h2 { color: blue; } details{ width: 400px; font-size: 1.2em; } </style> </head> <body> <h2>Текст скрыт при загрузке страницы</h2> <p><details> <summary>Развернуть или свернуть текст</summary> Скрытый текст</p> </details> </body> </html>
Открыть пример в новом окне
Текст скрыт при загрузке страницы
Текст скрыт при загрузке страницы
Текст открыт при загрузке страницы
С тегом <details> можно использовать атрибут open , данный логический атрибут указывает , пользователю , что при загрузке html – страницы текст будет открыт . По умолчанию установлено значение false, поэтому дополнительная информация будет скрыта.
Текст открыт при загрузке страницы
<!doctype html> <html lang="ru"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Текст открыт при загрузке</title> <style type="text/css"> @media screen and (max-width: 767px) { body { max-width: 767px; height: auto; } } h2 { color: blue; } details{ width: 400px; font-size: 1.2em; } </style> </head> <body> <h2>Текст открыт при загрузке страницы</h2> <p><details open> <summary>Развернуть или свернуть текст</summary> Скрытый текст</p> </details> </body> </html>
Открыть пример в новом окне
Текст открыт при загрузке страницы
Текст открыт при загрузке страницы
Тег <details> в рамке
Рассмотрим пример с подключение стилей css , чтобы тексту придать более лучший вид .
Тег <details> в рамке
<!doctype html> <html lang="ru"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Тег details в рамке</title> <style type="text/css"> @media screen and (max-width: 767px) { body { max-width: 767px; height: auto; } } h2 { color: blue; } details { border: 1px solid #aaa; /* Бордюр ширина , цвет*/ border-radius: 4px; /* Бордюр закругление углов*/ padding: .5em .5em 0; /* Отступы внутри блока */ } summary { /* Стиль скрытого текста*/ font-weight: bold; /* Жирность шрифта*/ margin: -.5em -.5em 0; /* Отступы снаружи блока */ padding: .5em; /* Отступы внутри блока */ } </style> </head> <body> <h2>Тег details в рамке</h2> <p><details> <summary>Посмотреть скрытый текст</summary> <p>Скрытый текст</p> </details></p> </details> </body> </html>
Открыть пример в новом окне
Тег details в рамке
Тег details в рамке
Добавление своих значков
Добавление своих значков
<!doctype html> <html lang="ru"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Добавление своих значков</title> <style type="text/css"> @media screen and (max-width: 767px) { body { max-width: 767px; height: auto; } } h2 { color: blue; } details { border: 1px solid #aaa; /* Бордюр ширина , цвет*/ border-radius: 4px; /* Бордюр закругление углов*/ padding: . 5em .5em 0; /* Отступы внутри блока */ } summary { /* Стиль скрытого текста*/ font-weight: bold; /* Жирность шрифта*/ margin: -.5em -.5em 0; /* Отступы снаружи блока */ padding: .5em; /* Отступы внутри блока */ } summary { display: block; /*Расположение блоком*/ } summary::-webkit-details-marker { display: none; /*Скрываем маркер*/ } summary::before { content: '\2B02'; /*Маркер при скрытом блоке*/ padding-right: 0.5em; } details[open] > summary::before { content: '\2B07'; /*Маркер при раскрытом блоке*/ } </style> </head> <body> <h2>Добавление своих значков</h2> <p><details> <summary>Посмотреть скрытый текст</summary> <p>Скрытый текст</p> </details></p> </details> </body> </html>
Открыть пример в новом окне
Добавление своих значков
Добавление своих значков
Цвет текста
Тег <span> – парный тег , в отличие от тега <div> отличается тем , что тег <div> является блочным тегом , а помощью тега <span> можно выделить одно слово в тексте или несколько слов :
Выделение текста цвета
<!doctype html> <html lang="ru"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Выделение текста цвета</title> <style type="text/css"> @media screen and (max-width: 767px) { body { max-width: 767px; height: auto; } } h2 { color: blue; } p { font-size: 1. 2em; /*Размер шрифта*/ } span { /*Стиль для всех элементов SPAN */ font-size: 13pt; /* Размер шрифта */ color: blue; /*Цвет шрифта */ font-family: "Arial"; /* Название шрифта */ font-weight: bold; /*Жирность шрифта */ } .text-color { /* Стиль для класса .text-color*/ font: 1em Georgia, Times, serif; /*Размер, Название шрифта */ color: #c80404; /*Цвет шрифта */ font-weight: bold; /*Жирность шрифта */ } </style> </head> <body> <h2>Цвет текста</h2> <p>С помощью элемента <span>SPAN</span> можно выделить важное <span>слово</span> внутри абзаца .</p> <p>Можно выделить одно <span>слово</span> в тексте или <span>несколько слов</span>.</p> </body> </html>
Открыть пример в новом окне
Выделение текста цвета
Выделение текста цвета
Руководство по скрытию текста
Веб-разработчики используют функцию скрытого текста HTML для временного удаления любого содержимого на своих веб-страницах. Причина, по которой вы можете захотеть что-то скрыть в документах HTML, заключается в том, что вы не хотите безвозвратно удалять какой-либо конкретный текст. Вы должны использовать определенные теги или атрибуты HTML, чтобы сделать невидимым текст на вашей веб-странице.
К тому времени, когда вы закончите читать эту статью, вы станете экспертом в том, как скрыть HTML-код, не удаляя его.
Содержание
- Что такое скрытый текст HTML?
- Примеры кода и синтаксис, которые необходимо знать Как скрыть текст в документах HTML
- — Создание синтаксиса
- — Дополнительная функция скрытого атрибута HTML
- — Пример кода 1:
- — Изменение визуального вывода ваших HTML-элементов по умолчанию
- — Скрытый текст HTML с использованием определенных свойств CSS
- — Использование другого метода для той же функции
- Общая проблема
- Резюме всего важного
Что такое скрытый текст HTML?
Функция скрытого текста HTML используется для временного скрытия или удаления текста с вашей веб-страницы. Вы можете использовать этот метод, чтобы удалить любой нежелательный контент с вашей веб-страницы на определенный период времени. Давайте узнаем, как это делается.
Примеры кода и синтаксис, чтобы узнать, как скрыть текст в документах HTML
Существует два основных метода вы можете использовать, чтобы скрыть определенный текст в HTML, и оба требуют добавления определенных атрибутов HTML. Возможность достижения одной и той же цели с помощью различных элементов и атрибутов — одна из основных функций HTML. Не всегда веб-разработчики хотят полностью удалить определенный текст из вашего HTML-документа, потому что вы можете использовать его повторно позже. Два основных метода, которые можно использовать для скрытия текста в HTML, показаны в следующем списке:
- Использование скрытого атрибута HTML
- Использование определенных свойств CSS
Хотя это не единственные два метода, которые можно использовать для создания скрытого текста HTML, знать их необходимо. Мы будем использовать конкретные примеры, которые значительно облегчат процесс обучения. Давайте подробнее рассмотрим следующий раздел этой статьи и узнаем больше о первом методе , который требует использования определенных элементов и атрибутов HTML.
— Создание синтаксиса
Это наиболее распространенный метод, с которым вы столкнетесь, когда попытаетесь скрыть какой-либо конкретный текст в вашем HTML-документе . Вы должны знать, что скрытый HTML представляет логический атрибут и указывает, что элемент HTML больше не актуален. Поскольку этот атрибут HTML является частью глобальных атрибутов HTML, вы можете включить его в большинство элементов. Браузеры не будут обращать внимание на любые элементы со скрытым атрибутом HTML в их синтаксисе .
Не забудьте включить Скрытый атрибут HTML внутри открывающего тега любого элемента HTML, как показано здесь:
Этот контент важен и актуален прямо сейчас, как показано. У пользователя не будет никаких проблем, заметив это на веб-странице! Этот контент не важен для этой веб-страницы в данный момент, поэтому его не следует просматривать. Пользователь не увидит никакого контента, включенного сюда! |
Только Один HTML-атрибут может иметь огромное значение в вашем синтаксисе, как показано в этом примере. Этот атрибут не требует присвоения определенного значения , в отличие от многих других атрибутов HTML. Вы также должны знать, что это не единственная функция скрытого атрибута HTML. В следующем разделе этой статьи мы научим вас еще кое-чему, что вы можете сделать со скрытым атрибутом в вашем HTML-документе.
– Дополнительная функция скрытого атрибута HTML
Чтобы показать вам разнообразие скрытого HTML-атрибута , мы продемонстрируем другой способ его реализации в вашем синтаксисе. Вы можете использовать этот атрибут внутри открывающего тега ввода HTML, чтобы включить данные, которые пользователь не может увидеть или изменить после отправки формы. Пользователи никак не могут сделать их видимыми на отображаемой веб-странице, если они каким-либо образом не изменят код.
— Пример кода 1:
Для создания этого синтаксиса необходимо добавить различных элементов и атрибутов , как показано в следующих примерах:
Как видите, последний элемент ввода HTML содержит скрытое значение внутри атрибута типа HTML. Поступая таким образом, вы указываете своему браузеру скрывать любой контент, загружаемый пользователем после завершения отправки.
Однако обычно синтаксиса HTML недостаточно, чтобы сделать элементы привлекательными, чтобы пользователи могли их легче заметить. Вот почему в следующем разделе этой статьи мы научим вас, как изменить визуальный вывод по умолчанию ваших HTML-элементов и атрибутов.
— Изменение визуального вывода ваших HTML-элементов по умолчанию
Один из лучших способов стилизации визуального вывода ваших HTML-элементов — это использование специальных Свойства стиля CSS . Написание синтаксиса CSS состоит из нескольких шагов, где вы должны написать необходимые свойства и присвоить определенное значение.
Самый простой способ сгруппировать свойства CSS — это создать определенные классы CSS, которые будут влиять на любой элемент синтаксиса HTML. Мы собираемся создать синтаксис CSS, содержащий несколько классов, определяющих стиль всех элементов HTML.
Пример кода 2:
Давайте подробнее рассмотрим следующий пример, который содержит необходимый синтаксис CSS :
html { семейство шрифтов: Arial; } форма { ширина: 450 пикселей; } div { display: flex; нижняя граница: 9px; } метка { flex: 3; высота строки: 3; выравнивание текста: вправо; padding-right: 18px; } input, textarea { flex: 6; семейство шрифтов: Arial; размер шрифта: 1.3rem; отступ: 6px; } текстовая область { высота: 55 пикселей; } |
Как видите, этого достаточно, чтобы полностью изменить внешний вид ваших HTML-элементов. Хотя количество CSS-свойств, которые вы можете использовать, не ограничено, эксперты советуют пользователям включать только самые важные из них, чтобы они могли поддерживать порядок.
Теперь давайте посмотрим, как вы можете использовать определенные свойства и значения CSS, чтобы скрыть любой конкретный текст внутри вашего HTML-документа.
— Скрытый текст HTML с помощью определенных свойств CSS
Свойства CSS можно использовать не только для изменения внешнего вида HTML-элементов, но и для скрытия лишнего текста на веб-странице. Опять же, вы не собираетесь полностью удалять текст, а только временно скрываете его от пользователя.
Вы можете включать свойства CSS непосредственно в открывающие теги HTML . Мы собираемся показать вам несколько значений свойств CSS, которые вы можете использовать, чтобы скрыть содержимое.
В этом примере мы будем использовать Свойство отображения CSS внутри открывающего HTML-тега div:
Этот текст скрыт от пользователей |
Как видите, значение свойства CSS display установлено равным none. Это сделает текст невидимым.
— Использование другого метода для той же функции
Второй метод очень похож, поскольку требует добавления другого CSS значение свойства с той же функцией.
Все, что вам нужно сделать, это включить свойство видимости CSS, , как показано в следующем примере:
Единственная разница между этим примером и предыдущим заключается в добавлении свойства видимости CSS с его «скрытым» значением . Эти две строки кода имеют одинаковую функцию и могут быть использованы один раз, чтобы скрыть любой контент от пользователей на вашей веб-странице. Какой из них более практичный, решать только вам.
Распространенная проблема
Скрытие HTML-кода — одна из проблем, с которой сталкиваются многие эксперты и поисковые системы при создании сложного HTML-документа. Одна из причин, по которой на поисковые системы сильно влияет код скрытия в HTML , заключается в том, что спамеры наводняют свои веб-страницы определенными ключевыми словами для улучшения SEO (поисковая оптимизация).
Это означает, что основной контент на их веб-странице не будет затронут ключевыми словами, которые будут невидимы для пользователей.
Следовательно, поисковые системы и их функции были недавно улучшены, чтобы обнаруживать, когда это делают спамеры . Они обязаны принимать соответствующие меры и в некоторой степени даже наказывать определенные веб-страницы, которые заходят слишком далеко.
Новичкам следует помнить об этом, чтобы не совершить ту же ошибку и не получить штраф за то, чего они не собирались делать. Теперь вы можете применить теорию на практике, создав полный скрытый текст в HTML 9.Синтаксис 0004.
Резюме всего важного
Веб-разработчики используют функцию скрытого текста HTML для временного удаления любого содержимого на своих веб-страницах. Несмотря на то, что вы узнали все об основах скрытого текста HTML, в этой статье также были рассмотрены следующие важные моменты:
- Скрытие чего-либо с вашей веб-страницы иногда может быть полезным, однако полное удаление части синтаксиса может вызвать больше проблем.
- Любой скрытый текст в HTML-документе можно использовать повторно в будущем. Существует распространенная проблема, с которой сталкиваются поисковые системы при работе со скрытым текстом 9.0014
- Существует два основных метода скрытия любого текста на веб-странице
- Скрытый атрибут HTML имеет дополнительную функцию
- Использование определенных свойств CSS для ваших HTML-элементов всегда полезно
Попытка временно удалить что-либо с вашей веб-страницы не всегда должна быть сложным процессом. Внимательно прочитав каждый раздел этого руководства, вы готовы без особых усилий скрыть любой контент внутри вашего HTML-документа.
- Автор
- Последние сообщения
Должность решает все
Должность решает все: ваш ресурс для изучения и создания: CSS, JavaScript, HTML, PHP, C++ и MYSQL.
Последние сообщения от Position is Everything (посмотреть все)
SEO — Безопасный скрытый текст в HTML?
спросил
Изменено
10 лет, 5 месяцев назад
Просмотрено
10 тысяч раз
Мне нужно иметь некоторый скрытый текст в HTML для анализа как текст, когда я читаю фактический файл HTML
Раньше я включал свой текст в скрытый div, используя стиль, но я знал, что это может записать нас как спамеров в SEO
. hideme { положение: абсолютное; слева: -1000px; }
Могу ли я использовать этот контент в качестве комментария в HTML?
будет ли это безопасно, так как я знаю, что сканеры SEO игнорируют комментарии в HTML
Пожалуйста, совет
- SEO
- поисковый робот
- HTML
- предотвращение спама
Поисковые системы заботятся о скрытом тексте только тогда, когда он используется для управления рейтингом страницы. Обычно это определяется как контент, который представлен поисковым системам, но не представлен пользователям. Поэтому, если вы скроете текст, чтобы пользователи не могли его видеть, а поисковые роботы могли, у вас возникнут проблемы с Google. Пример того, когда хорошо скрывать текст, — это когда вы используете display:none
, чтобы скрыть динамическое содержимое, а затем использовать JavaScript или CSS для отображения содержимого при выполнении действия (например, при наведении курсора мыши и т.