Hover toggle click на Jquery

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

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

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

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

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

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

            $(".box4").click(function(){
                $(this).toggleClass("light");
            });
            

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

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