Изменение фонового изображения и других эффектов при наведении курсора на веб-страницу с помощью CSS

Один из способов изменить фоновое изображение при наведении курсора — использовать язык CSS. Поэтому, чтобы узнать, как сделать то же самое на веб-странице (HTML), сначала необходимо познакомиться с языком каскадных таблиц стилей, широко известным как CSS.

1

Также, Парение имеет очень важное значение, так как определенная область (имеющая текст или изображение) на веб-странице выделяется, как только туда наводится курсор, и, следовательно, образует один из основных компонентов, обеспечивающих уникальный и стильный дизайн веб-страниц. «Изменение фонового изображения при наведении курсора» — одна из причин, по которой разработчики и дизайнеры веб-сайтов должны знать способ его выполнения, и это можно реализовать на практике с помощью CSS. Хотя процесс изменения фонового изображения при наведении указателя мыши с помощью CSS может выполняться только дизайнерами веб-сайтов и некоторыми общими знаниями языка .css, давайте взглянем на то, что такое CSS и как его можно использовать для создания различных эффекты наведения.

Распознать каскадную таблицу стилей (CSS)

Это язык таблиц стилей, используемый для описания внешнего вида и форматирования документа, написанного на языке разметки. Он используется для придания уникальных стилей веб-страницам, написанным на различных языках, таких как HTML, XHTML, и любых XML-документах, включая простой XML, XUL, а также SVG. Он формирует краеугольную спецификацию веб-страниц для изображения их презентации. Расширение имени файла .css. Он имеет практические навыки создания ярких эффектов и создания более стильных и эффективных веб-страниц.

2

Более того, его синтаксис довольно прост и использует несколько английских ключевых слов для обозначения названий различных свойств стиля и имеет несколько вариаций, таких как CSS 1, 2, 2.1, 3 и 4.

Простой способ изменить фоновое изображение при наведении курсора с помощью CSS

Создайте новый файл .css или используйте встроенный CSS для процесса

1) На самом первом этапе определите значения привязки a {…}

  • Дисплей: блок;
  • Выберите высоту и ширину в соответствии с изображением, которое вы хотите показать на фоне.

2) Теперь установите событие зависания для Anchor a: hover {…}

  • Найдите точное местоположение изображения, которое вы хотите показать на фоне
  • Если хотите, добавьте другие эффекты: граница, цвет границы, положение фона и т. Д.

a {

дисплей: блок;

высота: 40 пикселей;

ширина: 180 пикселей;

}

a: hover {

фоновое изображение: url (../ img / wlm_buy.gif);

граница: пунктирная

}

Различные эффекты наведения, которые может создавать CSS

Многие эффекты могут быть созданы при наведении курсора с помощью CSS. Некоторые из них описаны ниже:

  1. Обмен изображениями — Здесь исходное изображение заменяется другим изображением. При наведении курсора мыши один элемент div, содержащий изображение, заменяется другим изображением в фоновом режиме. Однако для этого необходимо выполнить специальное кодирование CSS.

Показанный пример — Предположим, что изображение, показанное ниже, отображается на веб-странице. С определенным кодированием CSS это изображение заменяется другим при наведении курсора мыши.

3

При наведении курсора мыши на изображение выше оно заменяется другим изображением, как показано на рисунке ниже.

4

  1. Изменение ссылки на изображение — Здесь ссылка на изображение изменяется при наведении курсора мыши, т.е. ссылка на изображение заменяется другой ссылкой с другим изображением при использовании уникального исходного кода в CSS.

Показанный примерПредположим, что ссылка на изображение, показанная ниже, отображается на странице HTML. С определенным исходным кодированием CSS ссылка на изображение заменяется другой ссылкой на изображение.

5

При наведении указателя мыши на ссылку на изображение выше, она заменяется другой ссылкой на изображение, как показано ниже.

6

3. Изменение цвета фона Div — Цвет фона Div может быть изменен при наведении курсора с помощью CSS-кодирования, как показано в примере.

Показанный примерDiv показан на рисунке ниже. Определенная исходная кодировка CSS может использоваться для изменения цвета фона div при наведении курсора.

9

При наведении указателя мыши на Div цвет фона меняется с красного на белый, как показано на изображении ниже.

7

Заключительные строки для эффектов, возникающих при наведении курсора с помощью CSS

В блоге показаны различные эффекты наведения, которые можно создать с помощью языка каскадных таблиц стилей на веб-странице (HTML). Однако исходные коды не разглашаются. В блоге были показаны три разных стиля, включая способ изменения фонового изображения при наведении курсора с помощью CSS. Два других — это обмен изображениями и обмен ссылками на изображения. Таким образом, можно сделать вывод, что с использованием CSS, будь то любая версия, на веб-странице могут быть созданы различные эффекты наведения. Эти эффекты делают страницы привлекательными, а также упрощают работу навигаторов.

Похожие записи

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

Ваш адрес email не будет опубликован.