5 Стиль наведения мыши для динамического изменения содержимого? »WebNots
Обычно весь контент на HTML-странице имеет предопределенный стиль с использованием внешней таблицы стилей. Есть много ситуаций, когда вам может понадобиться использовать определенные стили, чтобы выделить часть контента. Обычно этот метод используется для привлечения внимания пользователей, и вы можете динамически изменять контент с помощью события JavaScript «onMouseOver». Давайте обсудим, как динамически изменять контент для следующих сценариев:
Изменение динамического содержимого
- Изменение семейства шрифтов при наведении курсора
- Изменение содержимого при наведении указателя мыши
- Изменение размера шрифта при наведении указателя мыши
- Изменение цвета шрифта при наведении курсора
- Изменение стиля курсора при наведении указателя мыши
1. Динамическое изменение семейства шрифтов
Изменение семейства статических шрифтов с помощью HTML
Традиционный метод — это постоянное выделение содержимого с помощью атрибута face тега HTML . Ниже приведен пример того, как тег используется для изменения семейства шрифтов трех предложений одного абзаца.
Это шрифт Arial Это шрифт Verdana Это шрифт Calibri.
Вот HTML-код того же:
<p><font size=5 color=Red face=Arial>This is Arial font </font> <font size=5 color=Green face=Verdana>This is Verdana font </font> <font size=5 color=Green face=Calibri>This is Calibri font </font></p>
Динамическое изменение семейства шрифтов содержимого
Изменение семейства шрифтов с помощью тега HTML является статическим и постоянным, что может отвлекать пользователей от важного и обычного содержимого. Другой способ — динамически изменять семейство шрифтов содержимого, которое будет выделено на веб-странице всякий раз, когда посетитель наводит на него указатель мыши. Ниже приведен код виджета для динамического изменения семейства шрифтов с помощью события JavaScript «onMouseOver».
<SPAN STYLE="color:darkgreen" onMouseOver="this.style.fontFamily = 'Verdana'" onMouseOut="this.style.fontFamily = 'Arial'"> Move the mouse here to see the font change with the mouse movement? This can be used to highlight certain portions of your site content </SPAN>
По сути, мы предполагаем, что семейство шрифтов по умолчанию для контента — «Arial», и при наведении указателя мыши оно будет изменено на «Verdana». событие «onMouseOut» используется для сброса семейства шрифтов до значения по умолчанию «Arial», чтобы оно выглядело соответствующим образом.
Результат выполнения приведенного выше кода показан ниже. Наведите курсор мыши и проверьте динамическое изменение семейства шрифтов на «Verdana».
Переместите сюда мышь, чтобы увидеть, как шрифт меняется при движении мыши? Это можно использовать для выделения определенных частей содержимого вашего сайта.
2. Динамическое изменение содержания
Динамическое изменение содержимого
Событие onMouseOver в JavaScript используется для реализации многих интерактивных функций на странице без обращения к серверу. Вот одна из таких функций для динамического изменения содержимого, которую можно использовать для отображения более подробной информации об этом конкретном слове или содержимом.
Наведите указатель мыши на содержимое ниже в поле результатов, чтобы увидеть, как оно изменяется динамически.
Ниже приведен код эффекта:
<font size=4> <A HREF="https://www.webnots.com/"> <FONT onMouseOver="this.innerHTML = 'WebNots Web Consulting Services'" onMouseOut="this.innerHTML = 'WebNots'">WebNots</FONT></A> </font>
Отображение всплывающей подсказки на веб-странице
Если вы хотите показать всплывающую подсказку, которая будет отображаться при наведении курсора мыши, тогда атрибут title можно использовать с любым элементом HTML. Ниже приведен пример использования тега , при наведении курсора на текст «WebNots» отображается всплывающая подсказка.
WebNots это полезный сайт.
И код для приведенного выше результата:
<abbr title="WebNots Web Consulting Services"> <font size=4 color=green> <b>WebNots</b></abbr> </font> <font color=blue>is an useful site.</font>
3. Динамическое изменение размера шрифта
Самый простой способ изменить размер шрифта любой конкретной части содержимого — использовать атрибут size тега HTML . Ниже приведен пример использования тега для увеличения размера содержимого.
Это выделено жирным шрифтом красным цветом с размером шрифта = 6
HTML-код для того же:
<font size=6 color=Red> This is highlighted bold content in red color using font size = 6 </font>
Статическая загрузка увеличенного размера шрифта, как указано выше, может мешать работе пользователя. Следовательно, другой простой способ — динамически изменять размер шрифта содержимого без возврата на сервер. Размер шрифта будет меняться только каждый раз, когда посетитель наводит на него указатель мыши, что обеспечивает лучший пользовательский опыт. Вот код виджета для динамического изменения размера шрифта при наведении указателя мыши.
<SPAN STYLE="color:red" onMouseOver="this.style.fontSize="25px"" onMouseOut="this.style.fontSize="20px""> Move your mouse in and out of this paragraph! You can magnify the text when you move your mouse over here! </SPAN>
И результат приведенного выше кода:
Наведите указатель мыши на этот абзац и из него! Вы можете увеличить текст, наведя сюда указатель мыши!
Здесь размер шрифта составляет 25 пикселей, когда мышь перемещается по тексту, и 20 пикселей, когда мышь перемещается из текста. Вы можете изменить его на любой желаемый размер, чтобы он соответствовал содержанию вашего сайта.
4. Динамическое изменение цвета шрифта
В большинстве случаев веб-мастерам необходимо отвлечь внимание посетителей сайта на важный контент или конкретный раздел на этой странице. Традиционный метод заключается в том, чтобы постоянно выделять контент, используя разные цвета шрифта с тегом шрифта HTML. Ниже приведен пример использования тега для выделения содержимого.
Красный цвет Зеленого цвета Синий цвет
HTML-код для того же:
<font size=5 color=Red>Red Color </font> <font size=5 color=Green>Green Color </font> <font size=5 color=Blue>Blue Color</font>
Другой простой способ — динамически изменить цвет шрифта содержимого, которое будет выделено на веб-странице, без возврата на сервер. Цвет содержимого будет меняться только тогда, когда посетитель наводит на него указатель мыши. Таким образом, все содержимое страницы будет выглядеть одинаково, когда страница загружается, и цвет важного содержимого изменяется, когда посетитель действительно выполняет какое-либо действие. Вот код виджета для динамического изменения цвета шрифта при наведении курсора мыши.
<H3 onMouseOver="this.style.color="blue";" onMouseOut="this.style.color="red";"> See what color I take when you move your mouse over me! And what happens when you take your mouse out?? </H3>
Посмотрите результат вышеприведенного кода.
Посмотри, какой цвет я получаю, когда ты наводишь на меня указатель мыши! А что будет, если вынуть мышку ??
Изменить цвет шрифта с фоном
Вы также можете изменить цвет шрифта содержимого вместе с цветом фона. Это полезно, особенно если контент размещается внутри элемент таблицы. Ниже приведен код для изменения шрифта и цвета фона.
<font face="Verdana" size="4" style="color:#2172A1" onMouseOver="this.style.color="white";this.style.backgroundColor="#2172A1"; this.style.cursor="hand";" onMouseOut="this.style.color="#7122A1";this.style.backgroundColor="#95BED4";"> Move mouse over to see the font color changes with the background color </font>
И вот результат …
Наведите курсор мыши, чтобы увидеть, как цвет шрифта меняется вместе с цветом фона
5. Динамическое изменение стиля курсора
Атрибут курсора тега стиля может использоваться для изменения курсора с предварительно определенными стилями. Его можно использовать в любом теге HTML. Вот пример использования тега привязки, наведите указатель мыши на текст привязки и посмотрите стиль курсора.
Веб-консалтинговые услуги WebNots
HTML-код для этого приведен ниже.
<font size=4> <a href="https://www.webnots.com" style="cursor:help"> WebNots - A Knowledge Sharing Platform for Webmasters </a> </font>
В приведенном выше примере используется значение атрибута «справка», а ниже приведены допустимые атрибуты элемента курсора.
- рука
- перекрестие
- дефолт
- шаг
- электронное изменение размера
- изменить размер
- nw-resize
- n-изменить размер
- изменить размер
- sw-resize
- s-изменить размер
- w-изменение размера
- тест и
- Подождите
Элемент курсора можно использовать с любым тегом HTML, и вот еще один пример с тегом изображения, использующим значение атрибута курсора перекрестия. Наведите указатель мыши на изображение, чтобы увидеть, как курсор изменится на перекрестие.
Предупреждение: все события, связанные с наведением указателя мыши, не будут работать на мобильных устройствах, где нет необходимости использовать мышь.
