Доброго времени суток, любознательные подписчики и гости блога. Сегодня мы разберем с вами полезный раздел в прототипно-ориентированном сценарном языке, а именно событие при наведении мыши JavaScript.
Я хочу, чтобы вы хорошенько разобрались в таких событиях, как click, mouseup, mousedown, mouseover и других, поняли разницу между ними и научились их использовать для решения поставленных задач. Конечно же после каждого ключевого теоретического материала вы сможете найти программную реализацию примеров. Ну что ж, приступим!
Все сведенья о событиях мышкиДля мыши существует несколько событий, которые полностью охватывают всевозможные действия курсора на странице . Среди них есть те, которые срабатывают при нажатии на объект, наведении на него или движении указателя по открытому окну. Их все можно поделить на две группы: простые и комплексные (составные) события.
Начнем с простогоДля начала познакомимся с простыми событиями. Их всего пять. Для удобства я поместил описание каждого инструмента в таблицу, прикрепленную ниже.
| Наименование | Описание |
| mousedown | Названный event вызывается, когда одна из кнопок мышки нажата, но пока еще не отпущена. |
| mouseup | А этот срабатывает уже при отпускании зажатой ранее кнопочки. |
| mouseover | Вызывается при наведении курсора на обрабатываемый объект. |
| mouseout | Обрабатывает действие выхода курсора из области элемента. |
| mousemove | Любое движение указателя над определенной областью вызывает текущее событие. |
Ну а теперь для закрепления материала разберем пример. Я создал небольшую программку, в которой изменяются эмоции смайла при наведении и отведении курсора.
Наведите на изображение курсор мыши и оно изменится.
А теперь отведите его в сторону и понаблюдайте за изменениями
function ChangeOver(x) {
x.src= "http://storage2.vsemayki.ru/images/0/0/514/514012/previews/sign_front_white_500.jpg";
};
function ChangeOut(x) {
x.src= "http://storage2.vsemayki.ru/images/0/0/514/514102/previews/sign_front_white_500.jpg";
}
Теперь давайте перейдем к комплексным видам. Каждый из таких событий включает в себя несколько простых. При этом все составные части комплексного события не срабатывают одновременно, а выстраиваются в очередь. Поэтому вы иногда могли наблюдать такую ситуацию, что при быстром кликанье по, к примеру, пунктам меню веб-сайта нажатия иногда не срабатывают.
Почему же так? Ответ достаточно прост.
Обработка событий происходит с какой-то максимально допустимой скоростью. И при этом не стоит забывать, что события обрабатываются по очереди. А значит при слишком быстром нажатии на разные элементы цепочка обработки может не выполниться полностью.
Итак, ниже перечислены составные события.Как вы уже поняли, комплексные события несколько упрощают жизнь разработчиков, включая в себя сразу набор необходимых простых event-ов. Вследствие этого на сегодняшний день никто не может представить обычной обработки кнопок или других элементов без того же click .
Для практического ознакомления с функционированием выше перечисленных событий я модифицировал предыдущее приложение. Проанализируйте результат моей работы.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
Пример наведения указателя на элемент страницы
|
Пример наведения указателя на элемент страницы
Нажмите на меня один раз и смайл улыбнется!
А теперь нажмите на меня двойным кликом и смайл начнет двигаться!
Если хочешь вернуться к начальному состоянию, то нажми на меня правой кнопкой!
function Smile() {
document.getElementById("pic").src= "http://storage2.vsemayki.ru/images/0/0/514/514012/previews/sign_front_white_500.jpg";
};
function Cry() {
document.getElementById("pic").src= "http://storage2.vsemayki.ru/images/0/0/514/514102/previews/sign_front_white_500.jpg";
};
function Move() {
document.getElementById("pic").src= "https://otvet.imgsmail.ru/download/197747824_e708b2123d2b2d745d271f15cb144dcc_800.gif";
};
Как видите, все очень просто. Данные элементы легко вызывать в коде и привязывать их к определенным действиям.
На этой ноте я завершаю свой рассказ. Надеюсь вы почерпнули для себя что-то интересное, новое и полезное!
С уважением, Роман Чуешов
Прочитано: 507 раз
) она как правило изменяет свой вид (становится в фокусе). Чаще всего это простое изменение цвета или добавления подчеркивания. Также изменяется курсор на кисть руки. В этой статье мы рассмотрим подробнее как красиво реализовать изменение стиля ссылки при наведении курсора.
Примеры с изменением вида ссылки при наведении Пример 1. Как изменить цвет и сделать подчеркивание при наведении a.class_A1 { /* Стиль ссылки по умолчанию */ color : blue ; text-decoration : none ; } a.class_A1:hover { /* Стиль ссылки при наведение */ color : red ; /* Изменяем цвет на красный Добавляем подчеркивание */ } При наведении ссылка станет красной и подчеркнутой: ссылка Пример 2. Как изменить фон ссылки при наведении a.class_A2 { color : blue ; text-decoration : none ; background : none ; padding : 2px ; } a.class_A2:hover { color : white ; background : blue ; } При наведении ссылка изменит фон на синий, а цвет ссылки станет белым: ссылкаПреобразуется на странице в следующее:
Пример 3. Как поменять курсор при наведении на ссылкуПо умолчанию у ссылок курсор при наведении имеет значение cursor :pointer . В следующем примере мы изменим его на другой.
a.class_A3 { /* Стиль ссылки по умолчанию */ color : blue ; text-decoration : none ; cursor : default ; /* Курсор по умолчанию */ } a.class_A3:hover { /* Стиль ссылки при наведение */ color : red ; /* Изменяем цвет на красный */ text-decoration : underline ; /* Добавляем подчеркивание */ cursor : crosshair ; /* Изменяем курсор */ } При наведении ссылка станет красной и подчеркнутой, а курсор станет в виде плюса: ссылкаПреобразуется на странице в следующее:
Пример 4. Сглаженное изменение стилей ссылкиС помощью свойства transition мы сгладим скорость изменения фона и цвета ссылки.
a.class_A4 { color : blue ; text-decoration : none ; background : #B9D3EE ; padding : 4px ; font-weight : bold ; border-radius : 4px ; transition : background 1s ease , color 0.5s ease ; /*Для браузера Google Chrome и Firefox: */ -webkit-transition : background 1s ease , color 0.5s ease ; -moz-transition : background 1s ease , color 0.5s ease ; } a.class_A4:hover { color : white ; background : blue ; } При наведении ссылка изменит фон на синий, а цвет ссылки станет белым, при этом все это будет сглажено: ссылкаПреобразуется на странице в следующее:
Пример 5. Красивое подчеркивание ссылки a.class_A5 { color : blue ; text-decoration : none ; } a.class_A5:hover { color : red ; border-bottom : 2px dashed #8A2BE2 ; /* С помощью этого свойства задаем стиль подчеркивания */ } При наведении ссылка изменит цвет и появится необычное подчеркивание: ссылкаПреобразуется на странице в следующее.
Доброго времени суток, друзья! Это очередная статья, написанная по просьбе одного из читателей моего блога. Сегодня мы реализуем возможность отображения картинки при наведении курсора мыши на ссылку. Зачем это может быть нужно? Все очень просто, таким способом можно сохранить пространство на сайте и вместе с тем оживить ссылки.
Как известно, реализовать всплывающие картинки можно при помощи jQuery, CSS, а также HTML. В сегодняшней статье я выложу готовый код этого эффекта, а также приведу несколько наглядных примеров. Каждый скрипт довольно простой, создан средствами CSS+HTML. Не стану вас больше томить и приведу готовые решения!
Всплывающая картинка при наведении
При наведении на текст, отображается скрытый графический контент
a.сайт-ssilka:hover+div
Давайте я вкратце объясню главные моменты. Дабы вывести всплывающее изображение нужно обратиться к тегу
с атрибутом src и после знака равно в кавычках прописать путь к изображению, предварительно закачав его в корневую папку сайта.
Тег с обязательным параметром href отвечает за создание и отображение ссылки (в моем примере это текст).
В случае, если элементы сайта сдвинулись, можно задать изображению ширину и высоту, используя свойство width и heigh . Параметры задаются в пикселях.
Атрибут alt позволяет поисковым механизмам более точно распознать, что изображается на картинке.
Для большей наглядности я выделил ту часть кода, которую вы вероятнее всего захотите изменить.
Всплывающий текст при наведении на ссылку
При наведении на текст всплывает текстовая подсказка
a.сайт-ssilka:hover+div
Смелее!!! Наведи на меня курсор!
Здорово!!! Все получилось:)
Как можно увидеть с примера при наведении на текст всплывает текстовая подсказка.
Исчезновение изображения при наведении на ссылку
При наведении на текст, картинка исчезает
a.сайт-ssilka:hover+div
Смелее!!! Наведи на меня курсор!
Для добавления определенного вышеприведенного эффекта достаточно скопировать подходящий вам код и вставить его в текстовый редактор. Таким образом, ссылку со всплывающим/исчезающим изображением можно прописать в любом месте статьи.
Важный момент! Каждый из представленных скриптов не вредит валидности сайта.
Не менее удобной считаю реализацию поставленной задачи путем добавления специального скрипта в файл стилей вашего шаблона, который, как правило, называется style.css.
Всплывающая картинка CSS
position: relative;
Thumbnail:hover{
Thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #3d3d3d;
border: 1px solid white;
visibility: hidden;
text-decoration: none;
border-radius: 4px 4px 4px 4px;
Moz-border-radius: 4px 4px 4px 4px;
Webkit-border-radius: 4px 4px 4px 4px;
Thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
Thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
left: 60px; /*position where enlarged image should offset horizontally */
Для вывода всплывающего окна при наведении на ссылку, в текст следует вставить следующую ссылку:
Помимо этого ссылку со всплывающей картинкой можно вставить в определенную часть вашего шаблона. Для этого следует внести нижеуказанный код в файл index.php. Это файл, определяющий визуальное расположение элементов сайта.
position: relative;
Thumbnail:hover{
background-color: transparent;
Thumbnail span{
position: absolute;
background-color: #ffffff;
border: 1px dashed gray;
visibility: hidden;
text-decoration: none;
Thumbnail span img{
border-width: 0;
Thumbnail:hover span{
visibility: visible;
text-align:center;
А вот эту часть кода нужно расположить в том месте, где должна отображаться ссылка:
Load
Hey! How are you?
Данный вариант считается менее приемлемым, так как позволяет в качестве всплывающих слов и символов использовать только латинские буквы. Прописав кириллические знаки на сайте отобразятся кракозябры, что негативным образом скажется на валидности сайта. Именно поэтому в примере ссылки я использовал англоязычные слова.
Код нужно вставить в самом конце сего файла либо перед открывающимся тегом .
Если вы пользуетесь CMS (Joomla, WordPress), то для вставки ссылки можно воспользоваться модулем, отображающим на сайте фрагменты HTML, называемым «HTML-код», предварительно установив используемый текстовый редактор в положение редактирования кода. Этот способ актуален в случае, когда необходимо установить ссылку со всплывающим изображением в определенной модульной позиции вашего сайта.
Надеюсь, статья оказалась вам полезной, и теперь вы знаете, как сделать всплывающую картинку.
Спасибо за внимание и до скорого на страницах Stimylrosta.
Обнаружили в тексте грамматическую ошибку? Пожалуйста, сообщите об этом администратору: выделите текст и нажмите сочетание горячих клавиш Ctrl+Enter
Если вам понравился эффект, то вы можете просто скопировать готовый код и использовать его!
Оживите свой веб-сайт!
Различные эффекты при наведении могут привнести свежести на страницы вашего сайта. Ранее для любого эффекта нужно было сталкиваться с javascript, но сегодня, после появления технологии CSS3, всё может делать в обход использования javascript.
Сегодняшние примеры все реализованы и оптимизированы под новые современные браузеры, и обязательно будут в них работать (например, в Mozilla или браузерах семейства WebKit). Мы не можем заверить вас относительно работы в IE, но в самых свежих версиях эффекты точно будут работать как надо. Но не стоит забывать, что для каждого эффекта подготовлен привлекательный вариант отката на случай, если браузер всё-таки не будет поддерживать эффект.
01. Увеличение
Демо: Для просмотра
Этот эффект очень просто внедрить, причем это можно реализовать несколькими способами. Мы воспользовались методом, когда к каждому изображению добавляется параметр полей, а затем, при наведении курсора мыши, этот параметр убирается. Допустим, параметр полей начинается на 15 пикселях, а при наведении становится 2 пикселя, что приводит к тому, как будто, изображение подпрыгивает. Вы можете также просто использовать этот эффект и с текстом, даже если ссылки расположены вертикально, а не горизонтально.
Переход здесь можно выставлять по своему усмотрению, причем эффект будет также привлекателен без какого-либо перехода. Мы, например, сделали эффект немного плавным, что, как нам показалось, добавит эффекту изюминку.
CSS-код эффекта Bump Up
Ex1 img{
border: 5px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
}
Ex1 img:hover {
margin-top: 2px;
}
02. Stack & Grow
Демо: Для просмотра
Автор этого эффекта, по видимому, хотел добиться некоего эффекта лампы-лавы, так как при наведении курсора мыши на список ссылок, каждое изображение медленно расширяется, а затем возвращается к первоначальному размеру.
Для реализации здесь были использованы изображения размером 400х133 пикселей. Затем они были изменены в размере до 300х100 пикселей посредством CSS, и расширены при наведении курсора мыши. Так как в примере весь список выровнен по центру, новый размер изображений преломлял всё выравнивание. Эту проблему можно решить посредством выставления отрицательных полей в половину ширины изображений в увеличенном размере.
CSS-код для Stack & Grow
/*Example 2*/
#container {
width: 300px;
margin: 0 auto;
}
#ex2 img{
height: 100px;
width: 300px;
margin: 15px 0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}
#ex2 img:hover {
height: 133px;
width: 400px;
margin-left: -50px;
}
03. Fade Text in
Демо: Для просмотра
Здесь автор хотел создать нечто вроде события по типу javascript, когда вы наводите курсор на один пункт, а эффект отображается на другом. Здесь были взяты текст и изображение, а затем помещены в отдельный div с выравниванием по левому краю. Далее к div’у были добавлены параметры color: transparent и line-height: 0px. Это позволило разместить текст по верхнему краю div’а и вообще спрятать его.
Для того чтобы текст появился вновь, мы просто изменяем цвет и высоту строки. Когда вы наводите на изображение, текст снова появляется. Очень забавный и лёгкий эффект.
CSS-код эффекта Fade Text In
#ex3 {
width: 730px;
height: 133px;
line-height: 0px;
color: transparent;
font-size: 50px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
text-transform: uppercase;
}
#ex3:hover {
line-height: 133px;
color: #575858;
}
#ex3 img{
float: left;
margin: 0 15px;
}
04. Crooked Photo
Демо: Для просмотра
Этот эффект очень прост, но он отлично подойдёт для галереи миниатюр. Для начала вам нужно создать сетку с изображениями, а затем вращать изображения при наведении курсора мыши на них, что создает привлекательный эффект.
Здесь нужно использовать много новых значений CSS, поэтому стоит рассматривать также вариант отката для более ранних версий браузеров. В нашей галерее будут использованы переходы, трансформации, а также тени блоков, правда, по вашему желанию. Трансформация будет отвечать за вращение изображения, а переходы будут отвечать за мягкий и плавный эффект.
Здесь вы можете применять псевдо-селекторы.
CSS-код для Crooked Photo
#ex4 {
width: 800px;
margin: 0 auto;
}
#ex4 img {
margin: 20px;
border: 5px solid #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
#ex4 img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
05. Fade In and Reflect
Демо: Для просмотра
Этот эффект немного посложнее в реализации, поэтому нам пришлось немного повозиться с ним, чтобы добиться достойного эффекта. Стандартное положение изображения – слегка прозрачное. Затем, когда вы наводите на изображение, уровень прозрачности понижается, и изображение приобретает первоначальный вид, а также появляется небольшое свечение и отражение (только для браузеров семейства WebKit).
К сожалению, отражение – это не совсем переход, поэтому оно появляется сразу, несмотря на то, что остальное содержимое появляется в замедленном темпе.
Если вы запутались в CSS-коде отражений, вы можете узнать об этом побольше в статье (David Walsh).
CSS-код эффекта Fade In and Reflect
#ex5 {
width: 700px;
margin: 0 auto;
min-height: 300px;
}
#ex5 img {
margin: 25px;
opacity: 0.8;
border: 10px solid #eee;
/*Transition*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
/*Reflection*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));
}
#ex5 img:hover {
opacity: 1;
/*Reflection*/
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
/*Glow*/
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
Заключение
Этих 5 примеров должно быть достаточно для вдохновения вас на создание нечто собственного. Помните, что вы всегда можете поэкспериментировать с уже готовыми примерами, а затем рассказать нам о них.
Если вы встречали другие привлекательные эффекты где-то в сети, то, пожалуйста, расскажите нам и остальным читателям об этом.
Применение различных hover эффектов CSS при наведении курсора на изображение, ссылку или текст является одним из наиболее распространенных методов CSS .
В этой статье я собрал много интересных эффектов CSS3 , проявляющихся при наведении курсора мыши. Вы можете легко применить их на своем сайте или других веб-проектах. Давайте посмотрим, что я для вас приготовил.
1. 10 Stylish Hover EffectsКак следует из названия, это коллекция из 10 невероятно стильных эффектов наведения.
Исходный код
2. Direction-aware Hover EffectКогда вы наводите указатель мыши на различные элементы, CSS hover эффект при наведении следует за курсором и создает удивительные 3D презентации.
Исходный код
Это уже довольно избитый эффект, но многие люди все равно с удовольствием его используют. Презентация является простой, но привлекательной.
Исходный код
Если вы ищете круговые эффекты наведения, здесь вы найдете несколько интересных. В общей сложности доступно 12 различных CSS hover эффектов рамки.
Исходный код
Это еще один интересный эффект наведения. Он идеально подойдет для миниатюр или других типов изображений.
Исходный код
А вот несколько впечатляющих эффектов наведения для кнопок. Все они прекрасно подойдут для сайтов любого типа.
Исходный код
Еще один набор из 10 hover эффектов CSS для кнопок. Большинство из них довольно впечатляющие.
Исходный код
Это коллекция, состоящая из четырех различных эффектов наведения на изображение. Вместе с эффектом отображаются его название и описание.
Исходный код
Это забавный и интересный эффект наведения для изображений. Круглая рамка идеально подходит для применения к аватаркам участников команды, изображений рекомендаций.
Исходный код
Этот стильный винтажный hover эффект CSS вызовет в вас чувство ностальгии. Вы можете использовать его, чтобы создать ретро стиль для сайта.
Исходный код
При наведении курсора мыши на изображение этот эффект выводит заголовки на фоне с низкой непрозрачностью.
Исходный код
Это еще один простой, но очень красивый CSS hover эффект при наведении. При наведении курсора мыши на изображение он выводит название и описание с помощью смарт-эффекта перелистывания.
Исходный код
Пока вы не наведете курсор мыши на изображение, вы не поймете красоту этого эффекта. Случайные линии красиво превращаются в логотип, а затем он раскрашивается цветами.
Исходный код
Это невероятный CSS hover эффект рамки для изображений. Способ, с помощью которого одно изображение проявляется на фоне другого, невероятен!
Исходный код
При наведении курсора на изображение применяется уменьшение непрозрачности с фокусировкой на ссылке.
Исходный код
Возможно, это и не очень полезный hover эффект CSS , но забавный. Просто наведите курсор мыши на солнцезащитные очки, и начнется магия.
Исходный код
Это креативный эффект наведения, доступный в нескольких вариациях. В них предлагаются уникальные возможности для оформления изображений.
Исходный код
Подойдет для текста, кнопок или изображений. Постепенное воссоздание рамки — это действительно интересный эффект.
Исходный код
Вам нужен CSS hover эффект при наведении для панели поиска или иконки карты? Это именно он. Его бесшовные преобразования — сплошное удовольствие для глаз.
Исходный код
Этот эффект наведения можно применить, чтобы в начале скрыть иконки социальных медиа, а затем вывести их, когда пользователь наводит на них курсор мыши.
Исходный код
Это отличный способ предоставления дополнительной информации о товарах в интернет-магазине. При наведении курсора на изображение продукта с помощью красивого эффекта отображается информация о нем.
Исходный код
Идеальный CSS hover эффект при наведении для раздела «Связаться с нами «. Он отображает контактную информацию в раскрывающемся конверте, но только после того, как пользователь наведет курсор мыши на изображение.
Исходный код
Этот уникальный эффект наведения для кнопки «Вверх » позволяет предоставить посетителям красивый, анимированный указатель.
Исходный код
При наведении курсора мыши на изображение, оно не только увеличивается, но и изменяется способ его отображения.
Исходный код
Этот hover эффект CSS добавляет к изображению красивые стили.
Исходный код
Эффект наведения для круговых изображений. В коллекции присутствует четыре различных стиля эффектов наведения.
Исходный код
Этот CSS hover эффект при наведении воссоздает анимацию иконок Safari . Вы можете заменить значок собственным изображением или логотипом.
