Как сделать чтобы курсор менялся при наведении на кнопку
Добавил пользователь Алексей Ф. Обновлено: 04.10.2024
Мы задали цвет фона и текста, радиусы закругления, размер шрифта, отступы. Для анимации используем transition: all 500ms ease, которое означает, что в нужный момент будут анимированы все свойства в течение 500 миллисекунд.
Горизонтальная заполнение
Полупрозрачный фоновый цвет постепенно заполняет кнопку при наведении. Обычно заполнение происходит с какой-то одной стороны и переход длится до тех пор, пока вся кнопка не будет заполнена.
Данный контент абсолютно спозиционирован и расположен в верхнем левом углу кнопки. Зададим ширину равную 0px, потому что именно этот параметр мы будем анимировать. Чтобы анимировать его, мы просто изменим его ширину:
Вертикальное заполнение
Если анимировать высоту, то заполнение произойдёт сверху.
Инвертирование цвета
Инвертируем цвет внутри кнопки и добавляем границу:
Пунктирная граница
Добавим границу у кнопки и инвертируем цвета:
Появление значка
При наведении значок плавно появиться слева от текста.
Подключим шрифт со значками Font Awesome.
Увеличим внутренний отступ, чтобы для значка было место, и добавим свойство overflow со значением hidden:
Далее добавляем значок из шрифта Font Awesome в псевдо-элемент before и размещаем его за пределами кнопки:
Осталось установить свойство left:
Эффект подпрыгивания
Для данной анимации установим несколько ключевых кадров (keyframes):
Подключаем созданную анимацию:
Искажение
В CSS3 появилась возможность использовать искажения:
3D-поворот
Зададим для свойства transform-style значение preserve-3d, чтобы все дочерние элементы кнопки находились в 3D-пространстве:
Установим правила для псевдо-элемента after:
Правила добавлены сверху, перед кнопкой, и выставлены такие же параметры width и border-radius, как и у самой кнопки. Что касается свойств трансформации, то в качестве опорной точки, относительно которой будет происходить трансформация, установлен нижний левый угол элемента и указано вращение по оси X со значением 90 градусов, чтобы элемент казался плоским. Сейчас осталось только создать анимацию при наведении:
Чтобы активировать данный эффект, переместим опорную точку трансформации в центр, а также повернём сам элемент, чтобы реализовать трансформацию.
' width='8' height='8' /> Курсор при наведение., Как сделать чтобы курсор менялся при наведении на кнопку?
B.O.O.M.E.R.
MustLive
В данной задаче имеется два этапа:
1) наведение курсора (на кнопку),
2) смена курсора.
Для создания реакции на наведение, нужно для кнопки установить обработчик наведения курсора (rollOver):
Для смены курсора (со стандартного), нужно нарисовать свой курсор и запрограммировать, чтобы при наведении, в коде блока on (rollOver), курсор изменялся на свой (авторский), а при уведении курсора (rollOut) возвращался стандартный курсор.
О смене курсора я писал в 8м выпуске нашей рассылки (в статье "Создание курсора во Flash").
B.O.O.M.E.R.
Jox
tiHo
MustLive
Но, как вы наверное знаете, это может быть переопределёно в CSS, поэтому вы можете отображать курсор, какой захотите и в любое время. Заметьте, например, на сайте SitePoint с помощью CSS переопределено поведение курсора, который находится над обычным текстом.
На данный момент я не могу припомнить другой сайт, где встречается курсор, который при наведении на текст не меняет своего поведения. Единственное, я помню, что когда на "A List Apart" был редизайн сайта, они изначально сделали точно так же, как сейчас мы наблюдаем на SitePoint, т.е. ипользовали курсов в виде стрелки (по умолчанию), но через некоторое время вернули поведение курсора назад, изменив его на курсор по умолчанию для текстов (в виде палочки)
Какое поведение правильное?
Я думаю, что на данном этапе нет смысла стараться изменить то, как с этим справляются браузеры и разработчики. Тем более все браузеры делают это самостоятельно, в результате чего проще всего иметь одно и тоже поведение практически везде — даже если оно неправильное.
Но я не могу отделаться от мысли: не идет ли это вразрез с поведением обычных приложений?
Здесь это случается в каждом браузере, когда мы передвигаем курсор в адресную строку:
Это получилось не потому что этот текст находится в адресной строке, а потому что это редактируемый текст. Как насчет других мест в браузере Chrome, например, на странице настроек:
Они, вероятно, сделали это, чтобы сохранить страницу настроек настолько похожей на программный интерфейс, насколько это возможно, даже несмотря на то, что это всё ещё только веб-страница. Следовательно, пользователь может видеть, что текст на этой странице не редактируется, чего не скажешь о тексте в поле поиска.
Вот типичная логика для обычных приложений: редактируемый текст использует вертикальный I-образный текстовый курсор, в то время как обычный, нередактируемый текст использует дефолтную стрелку-указатель.
Заключение
На любой веб-странице, я думаю, это имеет больше смысла, если текстовый курсор используется для редактируемых элементов, типа textarea , input , и даже элементов с атрибутом contenteditable .
Что вы думаете? Браузеры всё время ошибались? Я не думаю, что мы сможем здесь повлиять на что-либо, но я полагаю, что если мы дождемся момента, когда используемые браузеры будут автообновляться, производители могли бы договориться использовать более интуитивное родное поведение в этом отношении.
Охх, и приношу извинения за все анимированные курсоры. Уверен, они ни у кого не вызвали раздражения :)
Здесь могла бы быть ваша реклама
Помог: 3 раз(а)
Секрет
Теперь, когда вы уже наверняка второпях отправили свой запрос,
я расскажу вам простой секрет, который сэкономит вам уйму ожиданий,
даже если первый ответ по теме последуем сразу же.
После этого приходится начинать уточнять этим неграмотным что мне надо.
Они что, сами читать не умеют? А уточнять приходится.
И иногда пока они переварят то что я им скажу проходит и не одна ночь..
Уверен что если бы я им сказал что у меня есть
фиолетовый квадрат, и нужно превратить его в синий треугольник
и я пытался взять кисточку, макнуть в банку и поводить ей по квадрату
но почему то кисточка не принимала цвет краски в банке,
то на мой вопрос - где взять правильные банки мне бы ответили гораздо быстрее
предложив её открыть, а не тратить еще стольник на жестянку.
Поэтому с тех пор я строю свои вопросы по проверенной давным давно схеме:
Что есть
Что нужно получить
Как я пытался
Почему или что у меня не получилось.
На последок как оно происходит на форумах
Отредактировано модератором: Uchkuma, 26 Апреля, 2011 - 10:21:12
Читайте также: