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

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

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

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

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

Более того, его синтаксис довольно прост и использует несколько английских ключевых слов для обозначения названий различных свойств стиля и имеет несколько вариаций, таких как 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 это изображение заменяется другим при наведении курсора мыши.

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

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

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

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

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

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

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

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

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