Как переместить элемент CSS background position при наведении указателя мыши


Содержание материала:

Фоны, изменяющие положение в зависимости от движения указателя

25 октября 2020 | Опубликовано в css | Нет комментариев »

Сегодня мы научимся создавать фоны, которые изменяют положение в зависимости от движения указателя. Это интересный эффект, который поможет вам оживить страницу, добавить ненавязчивый, но приятный интерактив. Для этого нам нужно будет поработать с HTML, CSS и JavaScript.

Допустим, вы бы хотели изменять положение фона у элемента в зависимости от движения указателя мыши, чтобы добавить дизайну изюминку. И для этого использовать подобный элемент:

C заданным фоновым изображением:

Настраивать расположение фона с помощью JavaScript можно следующим образом:

Или вместо этого можно изменять свойства переменных CSS с помощью JavaScript:

И подобного кода CSS:

Вот пример, в котором фон передвигается с помощью JavaScript, а также используется переход, чтобы при первом посещении положение фона изменялось плавно, а не скачкообразно:

Или можно двигать сам элемент, а не изменять положение его фона. Это стоит делать, если у передвигаемого элемента есть какое-то содержимое или с ним возможно взаимодействие. Вот пример, в котором опять используются свойства переменных CSS, а элемент передвигается с помощью функций CSS translate() (перенос) и calc() (вычислять), чтобы регулировать скорость:

Конечно, существует еще множество способов создать подобный эффект — двигающаяся область отображения SVG, скрипты, контролирующие объект области отображения, webGL и многие другие. Надеемся, наш урок вдохновит вас на эксперименты в этой области.

Эффект увеличения фонового изображения при наведении курсора мыши на HTML и CSS

Эффект увеличения изображения при наведении курсора мыши известен многим. Но как сделать так, чтобы увеличивалось только фоновое изображение (background-image) без увеличения основного содержимого блочного элемента?

Содадим блочный элемент с шириной 340 точек, а высотой 230 точек.

Для него укажем стиль:

.vozm <
width:340px;
height:230px;
float:left;
overflow: hidden;
>

Выравниваем по левому краю — float:left. Также указываем свойство overflow со значением hidden для того, чтобы фоновое изображение не выходило за область нашего блока.

На следующем этапе помещаем содержимое в наш блочный элемент:

.vozm p <
color:#da291c;
font-weight:bold;
font-size:16px;
line-height:21px;
>
.vozm .red_bl <
width:30px;
height:6px;
background-color:#da291c;
>

Указываем цвет текста для абзацев в блочном элементе — color со значением #da291c. Также указываем на то, что текст будет полужирный с размером (font-size) 16 пикселей и междустрочным интервалом (line-height) в 21 пиксель.

Стиль «red_bl» добавит красивый горизонтальный элемент красного цвета в наш блочный контейнер. Ширина 30 точек, высота 6 точек, цвет такой же как и у текста.

Также добавляем стиль для внутреннего блока:

Указываем относительное положение внутреннего блока с внутренними отступами слева 45 точек и сверху 40 точек.

Добавляем фоновое изображение background-image:

Стиль для него выглядит следующим образом:

.child <
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
>

Свойство transition для разных браузеров используется для того, чтобы эффект увеличения изображения фона при наведении происходил плавно в течении 50 миллисекунд. Ширину и высоту указываем равной 100%. Также позицию фона (background-position) ставим в центре и шасштабируем изображение (background-size) по ширине и высоте блока.

Дальше добавим эффект увеличения фонового изображения при наведении курсора мыши или фокусировке:

.vozm:hover .child,
.vozm:focus .child <
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
>

Для этого используется свойством transform cсо значением scale. Увеличение производим на 20% от исходного.

Ну и подгружаем сам фон:

Так как блочный элемент с фоновым изображением находится ниже нашего текста, то его необходимо поднять. Для этого используем отрицательное значение для свойства margin-top.

Итак, html код выглядит следующим образом:

А css следующим образом:

.vozm <
width:340px;
height:230px;
float:left;
overflow: hidden;
>
.child <
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
>
.vozm:hover .child,
.vozm:focus .child <
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
>
.vozm p <
color:#da291c;
font-weight:bold;
font-size:16px;
line-height:21px;
>
.vozm .red_bl <
width:30px;
height:6px;
background-color:#da291c;
>
.bg-1
.vposf <
position:relative;
z-index:9999;
left:45px;
top:40px;
>

Если поместим несколько блочных элементов относительно друг друга, то получим следующее изображение.

Девять простых примеров CSS3 анимации

CSS3 открывает неограниченные возможности перед UI-дизайнерами, и главный плюс состоит в том, что практически любую идею можно легко реализовать и воплотить в жизнь, не прибегая к использованию JavaScript.

Удивительно, как простые вещи могут оживить обычную веб-страницу, сделать ее более доступной для восприятия пользователями. Речь идет о CSS3 переходах, с помощью которых можно позволять элементу трансформироваться и изменять стиль, например, при наведении курсора. Девять примеров CSS3 анимации, которые доступны ниже, помогут создать на сайте атмосферу отзывчивости, а также улучшить общий вид страницы благодаря красивым плавным переходам.

Для более детального ознакомления вы можете скачать архив с файлами.

Все эффекты работают с помощью свойства transition (англ. transition — «переход», «превращение») и псевдокласса :hover , который определяет стиль элемента при наведении на него курсора мыши (подробнее о псевдоклассах в нашем учебнике). Для наших примеров мы использовали блок div размером 500×309 пикселей, исходный цвет фона #6d6d6d и длительность перехода от одного состояния к другому 0,3 секунды.

1. Изменение цвета при наведении курсора

Когда-то реализация такого эффекта была довольно кропотливой работой, с математическими вычислениями определенных значений RGB. Сейчас же достаточно записать стиль CSS, в котором необходимо добавить к селектору псевдокласс :hover и задать фоновый цвет, который плавно (за 0,3 секунды) заменит собой исходный цвет фона при наведении курсора на блок:

2. Появление рамки

Интересная и яркая трансформация — внутренняя рамка, плавно появляющаяся при наведении мыши. Хорошо подойдет для украшения различных кнопок. Чтобы добиться такого эффекта, используем псевдокласс :hover и свойство box-shadow с параметром inset (задает тень внутри элемента). Кроме этого, потребуется задать растяжение тени (в нашем случае это 23px ) и её цвет:

3. Свинг

Данная CSS анимация — исключение, т. к. здесь свойство transition не используется. Вместо него мы задействовали:

  • @keyframes — базовую директиву для создания покадровой CSS-анимации, которая позволяет делать т. н. раскадровку и описывать анимацию в виде списка ключевых моментов;
  • animation и animation-iteration-count — свойства для задания параметров анимации (длительность и скорость) и количества циклов (повторов). В нашем случае повтор 1.

4. Затухание

Эффект плавного затухания — это, по сути, обычное изменение прозрачности элемента. Анимация создается в два этапа: сначала необходимо установить первоначальное состояние прозрачности 1 — то есть полная непрозрачность, после чего указать её значение при наведении мыши — 0.6 :

Топ-пост этого месяца:  Редактор статей ВКонтакте - учимся публиковать статьи в ВК

Для противоположного результата поменяйте значения местами:

5. Увеличение

Чтобы при наведении курсора блок увеличивался, мы воспользуемся свойством transform и зададим ему значение scale(1.2) . При этом блок увеличится на 20 процентов с сохранением своих пропорций:

6. Уменьшение

Уменьшить элемент так же просто, как и увеличить. Если в пятом пункте для увеличения масштаба нам необходимо было указать значение больше, чем 1, то для уменьшения блока мы просто укажем значение, которое будет меньше единицы, например, scale(0.7) . Теперь при наведении мыши блок будет пропорционально уменьшаться на 30 процентов от своего первоначального размера:

7. Трансформация в круг

Одна из часто используемых анимаций — прямоугольный элемент, который при наведении курсора преобразовывается в окружность. С помощью свойства CSS border-radius , использованного в паре с :hover и transition , это можно реализовать без проблем:

8. Вращение

Забавный вариант анимации — поворот элемента на определенное количество градусов. Для этого нам снова понадобится свойство transform , но уже с другим значением — rotateZ(20deg) . При таких параметрах блок будет повернут на 20 градусов по часовой стрелке относительно оси Z:

9. 3D тень

Мнения дизайнеров расходятся в том, уместен ли данный эффект во флэт-дизайне. Тем не менее, эта CSS3 анимация является весьма оригинальной и также используется на веб-страницах. Добиваться трехмерного эффекта будем с помощью уже знакомых нам свойств box-shadow (создаст многослойную тень) и transform с параметром translateX(-7px) (обеспечит сдвиг блока по горизонтали влево на 7 пикселей):

Поддержка браузерами

На сегодняшний день свойство transition поддерживается следующими браузерами:

Десктопные браузеры
Internet Explorer Поддерживается версией IE 10 и выше
Chrome Поддерживается с версии 26 (до версии 25 работает с префиксом -webkit- )
Firefox Поддерживается с версии 16 (в версиях 4-15 работает с префиксом -moz- )
Opera Поддерживается с версии 12.1
Safari Поддерживается с версии 6.1 (в версиях 3.1-6 работает с префиксом -webkit- )
Мобильные браузеры
iOS Safari & Chrome Поддерживается с версии 7.0 (в версиях 3.2-6.1 работает с префиксом -webkit- )
Opera Mobile Поддерживается с версии 12.1
Android Browser Поддерживается с версии 4.4 (в версиях 2.1-4.3 работает с префиксом -webkit- )
Chrome/Firefox для Android Поддерживается с версии 47/44
Internet Explorer Mobile Поддерживается версией IE Mobile 10 и выше
UC Browser для Android Поддерживается с префиксом -webkit-

Остальные свойства, использованные в данных примерах, такие как transform , box-shadow и т. д., также поддерживаются почти всеми современными браузерами. Однако, если вы собираетесь использовать эти идеи для своих проектов, настоятельно рекомендуем перепроверять кроссбраузерность.

Надеемся, что эти примеры CSS3 анимации были полезными для вас. Желаем творческих успехов!

Меняем цвет элемента по наведению мышки

В данной статье на примере показано, как сделать на произвольном элементе сайта смену цвета, если на него был наведен курсор мышки.

Делается данная «штука» при помощи стилей CSS, т.е. придется добавить несколько строчек текста в файл стилей шаблона, а так же проявить свои дизайнерские способности. Я подскажу что именно добавить.

Обновлено 17.01.2020

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

Как только мышка оказывается наведена на любое поле в списке — происходит смена заднего фона строки, а так же цвет текста/ссылки в названии рубрики сайта.

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

В моем примере видим что эффект срабатывает на обычной ссылке. Вместо нее может быть контейнер

Чтобы сказать браузеру, что эффект нужно выполнять на конкретных ссылках, я взял их в отдельный

Практика

Теперь необходимо задать действие по наведению мышки. Как уже говорилось выше — делаем все при помощи стилей CSS (файл шаблона может называться style.css, css.css, core.css или еще как-то).

Данной строкой мы указали браузеру менять цвет заднего фона при наведении мышки на синий (#0078BF) и сказали что цвет шрифта должен стать белым (#fff). Сама «штука», позволяющая понять браузеру, что это нужно делать по наведению мышки — псевдокласс hover (о нем можно почитать ЗДЕСЬ ).

Чуть понятнее: мы указали что ссылка a должна находиться внутри контейнера с классом .catside . Далее мы добавили псевдокласс hover и оформили по правилам CSS.

Послесловие

В данной статье я показал как работает смена цвета элементов на самом обычном примере. Если хотите развиваться далее, то почитайте профильную литературу и справочники по CSS.

Использовать hover можно, практически, для всех элементов на сайте: блоки, текст, ссылки. Проявите немного фантазии и поймете как устроено у вас на сайте подобное. После этого сможете его украсить или сменить частично оформление.

Опять же о показанном примере: в нем не учитываются параметры оформления блока (отступы, размер шрифта, картинка и прочее). Это все можно узнать из моих предыдущих статей на блоге, либо воспользоваться консолью разработчика F12 в вашем браузере (как им пользоваться смотрите видео на моем канале YOUTUBE ).

Как изменить картинку при наведении на нее курсора или немного о hover-эффектах

Здравствуйте уважаемые читатели блога webcodius! Часто получаю вопросы: как сделать так, чтобы картинка на web-страничке менялась при наведении на нее курсора мыши. Такой эффект встречается на многих сайтах и самый простой пример, это когда вы наводите курсор на какую-нибудь кнопку, а она после этого меняет цвет. Иногда для создания подобного эффекта применяется JavaScript, но обычно достаточно одного CSS, особенно после появления CSS третьей версии. Далее в статье я расскажу как менять картинку при наведении курсора мыши с помощью только одного CSS, рассмотрю несколько способов и различные эффекты.

Эффекты изменения элемента веб страницы при наведении курсора мыши часто называют hover-эффектами. Связано это с тем, что при реализации таких эффектов используется псевдокласс :hover, который определяет стиль элемента при наведении на него курсора мыши.

Для начала рассмотрим вариант попроще. Допустим у Вас на страничке вставлена картинка, как приведено ниже:

Как вставлять картинки на веб-страницу вы можете узнать из статьи как вставить изображение на web-страницу.

И допустим вам необходимо менять ее отображение при наведении на нее курсора мыши. При вставке этого изображения к тегу img добвим атрибут , тогда html-код картинки будет выглядеть примерно так:

Для начала можно просто при наведении курсора сделать картинку прозрачной. За прозрачность в CSS отвечает свойство opacity , которое относится к CSS3. В качестве значения используются дробные числа от 0 до 1, где ноль соответствует полной прозрачности, а единица, наоборот, непрозрачности объекта. Для старых версий Internet Explorer придется использовать свойство filter со значением alpha(Opacity=X) , так как они не поддерживают свойство opacity . Вместо X надо будет подставить число от 0 до 100, где 0 означает полная прозрачность, а 100 — полная непрозрачность.

Тогда, чтобы сделать картинку прозрачной при наведении курсора в файл стилей, или между тегами и html-файла нужно добавить следующий css-код:

На случай если вы не разбираетесь в CSS поясню, что запись img.animate1:hover говорит браузеру, что для всех элементов , имеющих атрибут class равный animate1 при наведении на них курсора мыши, применять указанные стили. А стили указываются между фигурными скобками < и >. Если все сделали правильно, то должно получиться примерно так:

Можно сделать картинку в исходном состоянии полупрозрачной, а при наведении курсора делать ее не прозрачной. Тогда в CSS-файл нужно добавить такие строки:

Топ-пост этого месяца:  Повышение производительности приложения, воспринимаемой пользователем основные методы

img.animate1 <
filter: alpha (Opacity=25);
opacity: 0.25;
>
img.animate1:hover <
filter: alpha (Opacity=100);
opacity: 1;
>

Результат будет такой:

Для большего эффекта можно замедлить изменения прозрачности картинки. Для этого можно воспользоваться свойством CSS transition , которое устанавливает эффект перехода между двумя состояниями элемента. Добавим для примера одну секунду замедления. Тогда наш CSS код станет таким:

img.animate1 <
filter: alpha (Opacity=25);
opacity: 0.25;
-moz-transition: all 1s ease-in-out; /* эффект перехода для Firefox до версии 16.0 */
-webkit-transition: all 1s ease-in-out; /* эффект перехода для Chrome до версии 26.0, Safari, Android и iOS */
-o-transition: all 1s ease-in-out; /* эффект перехода для Opera до версии 12.10 */
transition: all 1s ease-in-out; /* эффект перехода для других браузеров */
>
img.animate1:hover <
filter: alpha (Opacity=100);
opacity: 1;
>

С помощью свойства transform изображение можно масштабировать, вращать, сдвигать, наклонять. Попробуем увеличить картинку. Тогда css-код будет таким:

img.animate1 <
— moz-transition: all 1s ease;
— webkit-transition: all 1s ease;
— o-transition: all 1s ease;
transition: all 1s ease;
>
img.animate1:hover <
— moz-transform: scale (1.5); /* эффект трансформации для Firefox до версии 16.0 */
— webkit-transform: scale (1.5); /* эффект трансформации для Chrome до версии 26.0, Safari, Android и iOS */
— o-transform: scale (1.5); /* эффект трансформации для Opera до версии 12.10 */
— ms-transform: scale (1.5); /* эффект трансформации для IE 9.0 */
transform: scale (1.5); /* эффект трансформации для других браузеров */
>

И результат будет таким:

К увеличению картинки можно добавить поворот. Тогда css стили немного изменяться:

img.animate1 <
— moz-transition: all 1s ease;
— webkit-transition: all 1s ease;
— o-transition: all 1s ease;
transition: all 1s ease;
>
img.animate1:hover <
— moz-transform: rotate (360deg) scale (1.5);
— webkit-transform: rotate (360deg) scale (1.5);
— o-transform: rotate (360deg) scale (1.5);
— ms-transform: rotate (360deg) scale (1.5);
transform: rotate (360deg) scale (1.5);
>

Выше мы рассмотрели случаи, когда в анимировании участвует одна картинка. Далее рассмотрим способы подмены одного изображения на другое. В этом случае обычно подготавливают два изображения одинакового размера: одно для исходного вида, другое для его подмены.

Допустим у нас есть две картинки, одна черно-белая другая цветная:

Сделаем так, чтобы при наведении курсора на черно-белое изображение отображалось цветное. Для этого исходную картинку сделаем фоном элемента div с помощью свойства background . А при наведнии на картинку курсора будем менять фоновую картинку с помощью все тех же псевдокласса hover и свойства background . Для реализации этого эффекта на html страницу добавляем элемент div с классом rotate1 :

И добавляем следующие описания стилей:

div.rotate1 <
background: url (img/2.jpg); /* Путь к файлу с исходным рисунком */
width: 480px; /* Ширина рисунка */
height: 360px; /* Высота рисунка */
>
div.rotate1:hover <
background: url (img/1.jpg); /* Путь к файлу с заменяемым рисунком */
>

Данный способ имеет один существенный недостаток. Так как второй рисунок загружается только при наведении курсора, то в случае если у пользователя медленный интернет, а размер файла с картинкой имеет большой размер, отображение картинки будет происходить с некоторой паузой. Поэтому ниже рассмотрим еще несколько способов подмены картинок при наведении курсора мыши.

Следующий способ будет основан на объединении двух картинок в один файл. Допустим нам нужно на страничку поместить кнопку, которая при наведении на нее курсора мыши меняла бы вид. Для этого два изображения объединяем в один файл и результирующая картинка будет выглядеть примерно так:

В этом случае смена одного рисунка на другой будет осуществляться путем сдвига фонового изображения по вертикали с помощью свойства background-position . Так как при клике по кнопке обычно происходит переход на другую страницу, то изображение вставим в элемент a> . Тогда в html-страницу вставляем такой код:

А в css-файл такой:

a.rotate2 <
background: url (img/button.png); /* Путь к файлу с исходным рисунком */
display: block; /* Ссылка как блочный элемент */
width: 50px; /* Ширина рисунка в пикселах */
height: 30px; /* Высота рисунка */
>
a.rotate2:hover <
background-position: 0 -30px; /* Смещение фона */
>

И последний на сегодня способ, это когда одно изображение размещается под другим с помощью css правила position: absolute . В этом случае помещаем в контейнер div два изображения:

И добавим css-стилей:

.animate2 <
position:relative;
margin:0 auto;/* устанваливаем блок div по центру страницы*/
width:480px; /* Ширина */
height: 360px; /* Высота */
>
.animate2 img <
position:absolute; /* абсолютное позиционирование*/
left: 0; /* выравниваем картинки по левому верхнему углу div-а*/
top: 0; /* выравниваем картинки по левому верхнему углу div-а */
>

После добавления правил css, картинки будут размещены друг под другом. Теперь управляя прозрачностью картинок с помощью свойства opacity в обычном состоянии будем показывать вторую картинку, а при наведении курсора первую. Для этого в обычном состоянии делаем картинку с классом first полностью прозрачной, а при наведении курсора наоборот: картинка с классом second будет полностью прозрачной, а с классом first не прозрачной:

Можно добиться плавности перехода добавив к последнему правилу свойство CSS transition :

.animate2:hover img.second, .animate2 img.second:hover <
opacity:0;
filter:alpha (opacity=0);
-moz-transition: all 2s ease;
-webkit-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
>

А если добавить свойство transform :

.animate2:hover img.second, .animate2 img.second:hover <
opacity:0;
filter:alpha (opacity=0);
-moz-transform:scale (0, 1);
-webkit-transform:scale (0, 1);
-o-transform:scale (0, 1);
-ms-transform:scale (0, 1);
transform:scale (0, 1); /* уменьшаем ширину картинки до 0 */
>

Комбинируя различные CSS свойства можно добиться различных hover эффектов при смене картинок во время наведения курсора мыши. Эти и другие примеры я поместил на этой странице, там же можно скачать исходники. На этом все, до новых встреч.

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

Главное меню » Блог-платформа wordpress » Как наложить эффект при наведении курсора на изображение с помощью CSS

Создайте файл с именем index.html и добавьте ниже код CSS перед закрытием тега head.

После этого добавьте ниже HTML-код. Пример ниже добавит текстовый эффект потускнения на изображение.

Пример: Скольжение в верхней части

Вот еще один пример с различными эффектами изображения. Добавьте приведенный ниже код CSS в область head вашей HTML страницы.

Теперь добавьте HTML-код ниже, чтобы создать графический эффект скольжения вверху.

Пример: Слайд слева

Добавьте приведенный ниже код CSS, прежде чем закрытием тега head.

Теперь добавьте ниже HTML-код для добавления изображения наложения эффекта cлева.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

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

У меня есть меню, состоящее из одного изображения (например, спрайты). Чтобы отобразить изображение при наведении, я просто перемещаю фоновое изображение вниз. Я хотел бы, чтобы этот эффект контролировался jQuery и анимирован.

Это примерный пункт меню.

Это то, с чем я играю. Я очень новичок в jQuery и у меня проблемы с запуском правильного селектора.

Не могли бы вы указать, что я делаю не так? Я знаю, что селектор, вероятно, неправильный, но мне трудно понять, как манипулировать якорем.

5 ответов

Если бы вы не анимировали переходы — и учитывая типы изображений, которые я сгруппировал как спрайты, я не знаю, зачем вы это делали — тогда вы бы хотели что-то вроде этого:

Топ-пост этого месяца:  Как вывести комментарии под каждым постом на главной

Теперь, если вы пытаетесь оживить это, то у вас плохой синтаксис для CSS и для вызовов «оживить».

Опять же, я сомневаюсь, что jQuery сможет анимировать «backgroundPosition» для вас, но тогда я не делаю «animate ()» очень часто, и jQuery всегда удивляет меня.

(Вам не нужны скобки там. В правиле background-position CSS нет скобок.)

В любом случае jQuery не знает, как анимировать составное значение, например backgroundPosition . В IE вы получаете доступ к нему с помощью backgroundPositionY , который, как простое значение, jQuery может анимировать. Однако это нестандартно и не будет работать в другом месте.

Вот плагин, который утверждает, что это исправить.

мне понравился этот метод (просто CSS)

Я полагаю, что ваш фон связан с li ?! Однако this установлено в a селектора, поэтому, если мое предположение верно, вам нужно будет изменить код на

// Используйте MouseEnter и MouseLeave, когда это возможно, и вам не нужно вводить длительность с текущей версией jQuery. Надеюсь это поможет.

Как переместить элемент CSS background position при наведении указателя мыши

В статьях CSS Плавная смена изображений. Часть 1 и CSS Плавная смена изображений. Часть 2 была рассмотрена автоматическая плавная смена изображений с использованием HTML тега

Как непрерывно плавно менять фоновые изображения я рассказал в статье CSS3 Плавная смена фона. А если нужно при наведении мыши изменить фон из набора картинок, имеющих небольшие размеры, удобно использовать CSS спрайты. CSS спрайты это один графический файл, содержащий картинки, расположенные в определенном порядке. Их использование снижает нагрузку на сервер и ускоряет загрузку веб-страниц, поскольку уменьшается общее число загружаемых файлов. Ниже рассмотрим один из вариантов их использования, позволяющий легко изменить фон.

Для примера сделаем стрелки, меняющие вид при наведении мыши и связанные с возвратом предыдущей страницы (страница вперед/назад). Использовать будем CSS спрайты и свойство background-position, позволяющее изменить фон при наведении мыши простым изменением позиции картинки.

Как это работает. Сначала в любом графическом редакторе создадим CSS спрайты:

Красной рамкой обозначены границы изображения. Разместим CSS спрайты на веб-странице

HTML

CSS3

Содержимое веб-страницы и background-image можно представить как два слоя — основной слой — сверху и background-image — под ним. На рисунках ниже основной слой закрашен серым цветом, а границы фонового изображения — CSS спрайты — обозначены красной штриховой линией.

В CSS3 — строки 23-25 — в основном слое создаем «окно» размером 70x28px (смотри Рис. 1) и размещаем в нем созданный рисунок. По умолчанию изображение помещается в div с параметром background-position: 0 0; и стиль — строки 28-31 — не нужен, я добавил его для наглядности. Поскольку размер изображения превышает размер «окна» видна лишь левая верхняя стрелка — левый рисунок.

Чтобы изменить фон при наведении мыши смещаем изображение вверх на 28px — строки 33-36 — и в «окно» попадает нижняя левая стрелка — правый рисунок. Чтобы создать «окно» и изменить фон при наведении мыши на правую стрелку поступаем аналогично — строки 38-47.

Переход по страницам реализуем установкой для HTML ссылок параметров href=»javascript:history.back()» и href=»javascript:history.forward()»

Таким способом можно также плавно изменить фон при наведении мыши с эффектом «сдвига».

Для этого в CSS3 после 25-й строки надо добавить свойства, как показано ниже

CSS3

Это самый простой способ плавно изменить фон при наведении мыши. С другими эффектами, например, «растворение» — свойство opacity: — и/или «свертывание/развертывание» — свойство scale: — плавно изменить фон при наведении мыши немножко сложнее.

Все оставшиеся вопросы Вы можете задать в комментариях или в форме «Обратная связь», расположенной в правой колонке под главным меню.

Изменение курсора при наведении мыши

Буквально пару дней назад меня попросили написать скрипт, который будет изменять курсор мыши при наведении на изображение. На самом деле, никаких скриптов для этой задачи не нужно, а требуется лишь CSS. Вот как изменить курсор мыши через CSS для любого объекта (а не только для изображения), Вы узнаете из этой статьи.

Для задания вида курсора используется свойство cursor. Фактически, всё, что нужно это добавить в CSS-стиль это свойство для тех элементов, у которых Вы хотите менять курсор при наведении мыши.

Данный код необходимо разместить либо в файле стилей, либо внутри тега style, находящегося внутри головы документа (тег head), либо можно воспользоваться inline-стилем:

Что касается, какие бывают курсоры и как они называются, можно почитать в этой статье: виды курсоров. Если нужно задать свой курсор, то тогда воспользуйтесь возможностью задать значение следующим образом: «cursor : url(«my.cur»), default;«. То есть нужно, используя url() указать путь к изображению курсора.

Вот таким простым образом изменяется вид курсора при наведении мыши, и безо всяких скриптов, что очень хорошо.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 18 ):

    Когда задаешь свой курсор, то через запятую лучше написать не ‘text’, a ‘default’. А то, напр., в Опере, где не поддерживаются свои курсоры, будет вам ‘I’ вместо стрелочки))

    Как перемещать CSS-фон на основе положения курсора/пальца без использования свойства background-position?

    Я работаю над небольшим приложением, где пользователь перемещает фон мышью или пальцем на экране.

    В background-position определяется положением курсора/пальца, используя этот вид кода:

    Однако, у меня есть значительные лаги на мобильных устройствах и планшет, а фон — «обрезка».

    Знаете ли вы, есть ли какая-либо альтернатива background-position ( transform ?), Чтобы переместить фон на основе положения курсора/мыши?

    Создан 10 июн. 16 2020-06-10 08:35:58 Alex

    Я думаю, что обрезка может быть неизбежной — если у вас нет определенного диапазона, неясно, как вы хотите, чтобы это было. у вас есть рабочая демонстрация или что-то подобное? – Aziz 10 июн. 16 2020-06-10 08:39:44

    @Aziz Я добавил ссылку на демо в вопросе – Alex 10 июн. 16 2020-06-10 08:43:22

    1 ответ

    Если вы хотите перевернуть свой собственный, просто используйте комбинацию функции jQuery mousemove в сочетании с преобразованиями CSS3. Что-то вдоль линий этого:

    Вот ссылка скрипки, что я получил от StackOverflow http://jsfiddle.net/ZmZhw/

    Есть ряд JS плагина, которые доступны, которые будут дать и некоторые плавный переход и производительность тоже.

    Создан 10 июн. 16 2020-06-10 08:48:09 SESN

    Спасибо за ваш ответ. Дело в том, что я ищу бесконечный фон для перемещения не определенного элемента для перевода. – Alex 10 июн. 16 2020-06-10 12:47:46

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