Изменение размера/цвета шрифта при наведении

Автор:
Nurlan Kemelbekov

Изменение размера/цвета шрифта при наведении. Как изменить цвет/размер шрифта при наведении курсора мыши или показать текст как ссылку.

Наведите курсор мыши на этот пункт и посмотрите, как шрифт, размер шрифта и цвета шрифта изменились.

Вот как это делается:

<p onmouseover="style.fontFamily='courier', style.fontWeight='bold', style.fontSize='17px', style.color='red'" onmouseout="style.fontFamily='arial', style.fontWeight='normal', style.fontSize='12px', style.color='black'">...

Вы также можете использовать элемент <span>, чтобы внести изменения стиля внутри абзаца:

Наведите сюда, чтобы увидеть изменения.

Вот как это делается:

... <span onmouseover="style.fontStyle='italic', style.fontWeight='bold', style.color='purple'" onmouseout="style.fontStyle='normal', style.fontWeight='normal', style.color='black'">Изменение стиля шрифта</span>....

Вы также можете изменить цвет фона абзаца с OnMouseOver / onmouseout.

Наведите курсор настоящего пункта; цвет фона должен изменится на розовый и шрифт должен измениться на жирный.

Как изменить цвет/размер шрифта при наведении курсора мыши или показать текст как ссылку

Вы заметили, что курсор превратился в указательный палец, хотя это не ссылка? Вот как это все делается:

<p style="cursor: pointer; background-color: transparent; font-weight: normal; padding: 0px;" onmouseover="style.backgroundColor='pink',style.fontWeight='bold',style.padding='5px'" onmouseout="style.backgroundColor='transparent',style.fontWeight='normal',style.padding='0'">....

Стиль style=»cursor: pointer»изменит курсор, когда мышь проходит над блочным элементом.

Тот же принцип будет работать на одной букве или на одном слове в пункте с помощью <span> элемента: Наведите сюда, чтобы увидеть пример. Это ложная ссылка — не нажимайте здесь

Стили таблицы.
Вот несколько вещей, которые можно сделать, чтобы оживить таблицы с помощью OnMouseOver / onmouseout:

<table width=400 align=center cellpadding=5 cellspacing=0 border=2>
<tr style="cursor:hand">
<td onmouseover="style.backgroundColor='blue', style.fontFamily='courier', style.color='white', style.fontWeight='bold'" onmouseout="style.backgroundColor='transparent', style.fontFamily='arial', style.color='black', style.fontWeight='normal'">
Содержимое ячейки.
</td>
<td onmouseover="style.backgroundColor='red', style.fontFamily='courier', style.color='yellow', style.fontWeight='bold'" onmouseout="style.backgroundColor='transparent', style.fontFamily='arial', style.color='black', style.fontWeight='normal'">
Содержимое ячейки.
</td>
</tr>
</table>

Вот как это выглядит:

Содержимое ячейки. Содержимое ячейки.

Стиль может быть установлен в tr, td, caption, tbody, thead и tbody элементах.

Близкие по теме записи Выбор оптимального размера шрифта для веб — сайта



Вам также может понравиться:


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

* Copy This Password *

* Type Or Paste Password Here *

16 + четыре =

Я просто хотел сказать, как сильно я ценю Ваш комментарий на мой пост. Спасибо Вам !!