2016
7
Окт

Hover toggle click на Jquery

grigoriev
1889
jquery click

Многие заказчики проектов требуют кроссбраузерные решения их задач. В современные браузерах реализованы или можно реализовать такие события как hover, active и click средствами css. Но не все старые браузеры (например ie 7) поддерживают эти свойства. Для их реализации используют javascript или библиотеку jquery. В данном посте мы попробуем реализовать события hover, active, click jquery и так же реализуем переключатель toggle jquery.

Для теста создадим несколько блоков(дивов) при воздействии на которые средствами JQ будем реализовывать hover, active, click и toggle. Вот css код данных блоков:

            .box1, .box2, .box3, .box4, .box5{
                margin: 0 auto;
                width: 200px;
                height: 100px;
                background: #7ab7f1;
                position: relative;
                margin-bottom: 10px;
                text-align: center;
                cursor: pointer;
            }
             .light{
                 background-color: chartreuse;
            }
            

Теперь давайте вспомним основы JQ. Подключим библиотеку к документу. Для выполнения скрипта сразу после загрузки документа используем метод redy().

            <script src="/js/libs/jquery/jquery.js"></script>
             <script type="text/javascript">
                $(document).ready(function(){
                   //здесь будут наши скрипты 
                 });
            </script>
            

Поместим этот код в блок head документа.

Предварительные настройки закончены и переходим теперь непосредственно к нашим событиям. Начнём с реализации hover jquery (наведения).

                $('.box1').hover(function(){
                    $(this).css({
                        'background': '#7AF1B8' // меняем цвет
                    });
                },function(){
                    $(this).css({
                        'background': '#7ab7f1' // меняем цвет
                    });
                });
            

У JQ есть такой же метод hover как и в css. Обращаемся к элементу box1 и вешаем на него событие hover. При наведении на блок меняем css свойство блока background.

hover JQ
Наведи курсор

Следующим событием, которое мы попытаемся реализовать будет active. Давайте разберёмся что у нас при этом происходит. После наведении курсора на элемент, который должен стать активным мы нажимаем кнопку мыши и с элементом происходит какое то действие. После отпускания кнопки мыши элемент возвращается в исходное состояние. В JQ есть события mousedown и mouseup. С их помощью мы попробуем реализовать active

            $('.box2').mousedown(function(){
                $(this).css({
                    'background': '#DF4B6E' // меняем цвет
                });
            }).mouseup(function(){
                $(this).css({
                    'background': '#7ab7f1' // меняем цвет
                });
            });
            
active JQ
Click me

Займёмся теперь событием сlick jquery. Здесь то же всё просто. В JQ есть событие click и мы просто привязываем его к элементу.

            $('.box3').click(function(){
                $(this).css({
                    'background': '#DF4B6E' // меняем цвет
                });
            });
            
Click JQ
Click me

И наконец давайте разберёмся с переключателем. Реализовать toggle jquery можно несколькими способами. В первом способе используем для реализации переключателя метод toggleClass. Он добавляет или удаляет css класс заданного нами элемента. Если добавляемый класс существует то он удаляется. Если класса отсутствует, то он добавляется. Мы при клике на див box4 добавляем ему класс с названием "light". Так как у класса light бэкграунд chartreuse, то при клике по диву бэкграунд меняется на chartreuse. При повторном клике если класс light существует, то он убирается и цвет бэкграунда возвращается в изначальное положение, тоесть как у box4

            $(".box4").click(function(){
                $(this).toggleClass("light");
            });
            
Переключатель1
Click me

Второй способ реализации переключателя основан на использовании метода toggle(). Этот метод позволяет чередовать действия функций, привязанных к определённому элементу. При клике мышки на блоке вызывается первая функция, при следующем клике вторая и так по кругу.

             $(".box5").toggle(
                function(){
                    $(this).css("background","red");
                },
                function(){
                    $(this).css("background","green");
                }
            ).click();
            

Поделиться:

Комментарии

Дамир

Дамир

14.02.2017 19:38 Ответить

Здравствуйте а вы можете мне подсказать прав я или нет?дело в том што у вас в статье указан блок с 4-ым классом и вот его именно этот код а не последний $(".box4").click(function(){$(this).toggleClass("light");});
Этот же код используется для включения play и stop для прослушки музыки так же да?Если да то какие есть действия дальнейшие штобы звук уже начал работать с мп3?Можете помочь с этим?

Алексей Григорьев

Алексей Григорьев

15.02.2017 08:59 Ответить

Здравствуйте, я не совсем понял что вы хотите сделать с мп3. Если вы хотите кликать по кнопке play и stop силами jquery, то указанный вами код не поможет. Он добавляет или удаляет к элементу css класс.
Курсов пока что у меня своих нет, но их очень много на торрентах. Посмотрите там.

Дамир

Дамир

15.02.2017 14:41 Ответить

Здравствуйте.С тем што объяснили понятно.А вот вы можете ответить на другой вопрос?Как сделать например при наведении на блок штобы появлялся возле него другой блок с фото?просто есть одна затея и хочу её реализовать.Как быть в этом случае

Алексей Григорьев

Алексей Григорьев

15.02.2017 16:05 Ответить

Берём два блока .box1 и .box2. Задача: при наведение на первый должен появляться второй. .box2 задаём css свойство display: none, что бы его не было видно. Js код:
$(document).ready(function(){
$('.box1').hove r(function(){
$('.box2').fade Toggle();
});
});

Дамир

Дамир

15.02.2017 21:15 Ответить

Спасибо вам большое а то што то не догадался.Вы мне отлично помогли.Ваш сайт просто супер.

Дамир

Дамир

08.04.2017 15:06 Ответить

Здравствуйте а вот я к вам с вопросом.А с вами можно будет договорится
по сделке?дело в том што мне нужны лайки на jquery и штобы эти лайки заносились в базу и плюс чтобы юзер смог всего лишь поставить один раз лайк и всё.Готов оплатить если конечно вы занимаетесь подработкой

Алексей Григорьев

Алексей Григорьев

09.04.2017 10:24 Ответить

Я думаю jquery здесь не обойтись. Механизм реализации я представляю таким. На сайте должна быть возможность регистрации пользователя. У зарегистрирован ного пользователя должен быть id и у статьи или поста должен быть id. Делаем табличку в бд для каждого пользователя и пишем в неё id статьи которую лайкнули. Так же для каждой статьи таблица в бд с общим количеством лайков. Грубо говоря такой простейший набросок получился. Наверняка вы работаете на какой то cms. Вам проще найти под неё уже готовый модуль, плагин. Я на уровне разработчика работаю в основном с joomla. Так что не знаю, смогу ли я быть вам полезен.

Дамир

Дамир

27.07.2017 19:40 Ответить

Здравствуйте Алексей думаю быть может поможете с отличным вопросом.Дело в том что у меня на странице здесь http://zatmenie-saita.ru/shablon.php есть меню и я хочу к этому меню приделать огромный блок который будет показывать содержимое к ссылке на которую навели курсором.Но вот в чём проблема.Когда я сам попытался так сделать то есть навести на ссылку "видео" то блок красный открылся,потом навёл на музыку другой блок открылся зелёный а потом сразу навёл на ссылку "видео" зелёный блок так и остался.Как можно сделать так чтобы при перемещении по ссылкам открывались разные блоки не притормаживая как у меня?Для отличия специально сделал красный блок и зелёный(чтобы хорошо можно было рассмотреть) и вот jquery код
к этому меню.Если что код на странице к меню

Алексей Григорьев

Алексей Григорьев

27.07.2017 21:19 Ответить

Привет. Можно попробовать сделать проверку на видимость элемента.
if ($element.is(': visible')) {
// $element виден
}

if ($element.is(': hidden')) {
// $element не виден
}
При наведении на другой пункт меню если первый пункт меню виден, то можно его скрыть через css

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


Защитный код
Обновить